Page scroll position not reset to top on navigation (regression) #2733

geoffrich · 2021-11-03T04:44:48Z

Describe the bug

When navigating to a new page, if you are already scrolled partway down the page, the next page load will keep the current scroll position and not scroll back to the top.

I believe this broke with next-193. When I install next-192, this does not happen -- navigating to a new page always scrolls to the top, just like regular browser navigation.

Reproduction

Init the SvelteKit demo project. Add the following paragraph in about.svelte after the last paragraph.

<p>Go <a href="/">home</a></p>

Make the browser window small enough so that the page scrolls and scroll to the bottom of the page. Click the Home link. The Home page loads, but does not scroll to the top (i.e. the nav bar is not visible).

.

Tested in Chrome and Firefox on Windows 10.

Logs

No response

System Info

System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
    Memory: 7.79 GB / 12.40 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 8.1.1 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
  npmPackages:
    @sveltejs/kit: ^1.0.0-next.193 => 1.0.0-next.193
    svelte: ^3.34.0 => 3.44.1

Severity

serious, but I can work around it

Additional Information

No response

The text was updated successfully, but these errors were encountered:

rmunn · 2021-11-04T02:31:53Z

Almost certainly caused by something in #2668, as that was merged in between the next.192 and next.193 releases and it's a scroll-related feature.

raymclee · 2021-11-04T18:47:50Z

I'm having same problem. What is the workaround please?

geoffrich · 2021-11-04T18:52:10Z

@raymclee for now, downgrade to 1.0.0-next.192. It's only 1 version back so you shouldn't be missing much (changelog)

npm i @sveltejs/[email protected]

raymclee · 2021-11-04T19:02:23Z

@raymclee for now, downgrade to 1.0.0-next.192. It's only 1 version back so you shouldn't be missing much (changelog)
npm i @sveltejs/[email protected]

thanks
just tried. no problem with next.192!

rosslh · 2021-11-06T00:19:22Z

With 1.0.0-next.194 this is resolved on Chrome but it is still broken for me on Firefox

bluwy · 2021-11-06T05:25:40Z

@rosslh I'm not able to reproduce in Firefox with the repro steps given in this issue. Do you have a different repro for the issue?

jgrieger · 2021-11-24T21:00:35Z

@bluwy @rosslh With v1.0.0-next.199 it is still not working correctly for me on Firefox (94.0 Linux Mint and 94.1.2 Android 12).
I can reproduce it by simply navigating back and forth via links on the footer. Worth noting: I toggle between two non-root pages, links to the "/" route always work.

bluwy · 2021-11-25T02:10:00Z

@jgrieger We haven't changed much in the router since this fix, so I'm guessing the root issue is the same as #2794 (newer). I haven't found a way around it yet.

rosslh · 2021-11-25T14:10:35Z

My issue was resolved at some point, not sure which version.

josh-collinsworth · 2021-12-01T21:24:35Z

Fixed for me in @sveltejs/[email protected].

jgrieger · 2021-12-08T09:40:15Z

Solve for me with @sveltejs/[email protected] 👍.

andreasnuesslein · 2021-12-16T13:24:27Z

i still have this issue with @sveltejs/[email protected]

sbutler-gh · 2021-12-16T14:51:24Z

I've been having this issue recently in @sveltejs/[email protected] on MacOS / Chromium browser. Rolling back to npm i @sveltejs/[email protected] solved it for me for now (thanks @geoffrich )

…veltejs/kit#2733)

johnknoop · 2022-01-25T12:35:11Z

Will this be resolved in an upcoming release? It's not a huge problem for me so I'd rather not downgrade to an earlier version, but it is a bit ugly so it would be great if it was solved a some point.

akkie · 2022-01-25T19:11:16Z

I have the same issue on MacOs with 1.0.0-next.240 on all available browsers. @benmccann please can we reopen this bug. I have seen that there are some related issues which are already closed. I'm not sure it makes sense to create a new bug every time this problem seems to be fixed.

jose-manuel-silva · 2022-01-25T21:04:32Z

Having the same issue on MacOs with SvelteKit v1.0.0-next.232

nhe23 · 2022-01-26T13:32:44Z

I cannot reproduce this issue. Scroll position is reset to the top as it should be for me. Im also using MacOS and the current SvelteKit Version (v1.0.0-next.242) and tested with Chrome and Safari using links to different routes (explicitly not "/"). It would be great if someone who has this issue could provide a repository to reproduce and detailed system information.

johnknoop · 2022-01-27T11:20:38Z

I can only reproduce it on my iPhone, not on my laptop (Windows).

If you have an iPhone, try and visit my site and scroll down a bit, then use the hamburger menu to go to the page "Skapa konto" (means "create account" in Swedish). You'll find that the scroll position isn't reset, since you can scroll up a bit.

jose-manuel-silva · 2022-01-27T12:56:39Z

A little bit more info: I just updated to SvelteKit v1.0.0-next.245, and scroll is still not reseting on page change, tried it on firefox, brave, and safari, which are all updated. You can as well visit my website to see it not working [https://painhas.com], just go there, scroll down a bit, and click in "originals" on the header (for example). Also im on macOS Monterey 12.2 beta to be more specific.

AutomateAaron · 2023-04-30T16:32:35Z

I'm here to report that I'm seeing this issue on the sveltekit sverdle demo (as well as my site) when I use scroll-behavior: smooth on firefox version 112.0.2 (64-bit) when I use scroll-behavior: smooth on the html.

eltigerchino · 2023-04-30T17:08:35Z

I'm here to report that I'm seeing this issue on the sveltekit sverdle demo (as well as my site) when I use scroll-behavior: smooth on firefox version 112.0.2 (64-bit) when I use scroll-behavior: smooth on the html.

Which issue are you referring to that causes scroll to break?

Setting overflow: hidden on the html element.
iOS webkit scroll-behavior: smooth bug.

If it's different from both of these, can you provide a reproducible?

AutomateAaron · 2023-04-30T20:22:40Z

Which issue are you referring to that causes scroll to break?

Setting overflow: hidden on the html element.

iOS webkit scroll-behavior: smooth bug.

If it's different from both of these, can you provide a reproducible?

It functions the same way people are describing the iOS issue in that it only appears when I apply the ’scroll-behavior: smooth’. I was able to reproduce it with a fresh install of the sverdle demo by only editing the style.css to add the smooth scrolling.

Edit: Here's the recording:

eltigerchino · 2023-05-01T02:01:40Z

Which issue are you referring to that causes scroll to break?

Setting overflow: hidden on the html element.

iOS webkit scroll-behavior: smooth bug.

If it's different from both of these, can you provide a reproducible?

It functions the same way people are describing the iOS issue in that it only appears when I apply the ’scroll-behavior: smooth’. I was able to reproduce it with a fresh install of the sverdle demo by only editing the style.css to add the smooth scrolling.

Edit: Here's the recording:

Thanks for the helpful feedback! I will try to investigate this as well.

eltigerchino · 2023-05-01T09:30:04Z

It functions the same way people are describing the iOS issue in that it only appears when I apply the ’scroll-behavior: smooth’. I was able to reproduce it with a fresh install of the sverdle demo by only editing the style.css to add the smooth scrolling.

I can't seem to reproduce this on the same version of Firefox (macos). https://stackblitz.com/github/s3812497/sveltejs-kit-2733?file=README.md

Can you reproduce it using the repository I've shared, or provide your own reproducible repository?

AutomateAaron · 2023-05-06T19:09:22Z

Can you reproduce it using the repository I've shared, or provide your own reproducible repository?

@s3812497 I am able to reproduce it with the repo you linked above:

Screen Recording

I was also to reproduce it in my repository: https://github.com/AaronNBrock/sveltekit-scroll-test

With some playing around with it. I'm noticing very consistent, yet odd behavior. You'll see the site has 3 pages /, /about and /about-other.

It only does not scroll to the top when going from (/ ⇾ /about or /about-other/)
It does work properly when navigating between the about pages.
It does work when navigating from about pages to the home page.

Also, this issue is only on Firefox (my version is 112.0.2 (64-bit) Windows 10) it works as expected on Chrome / Edge.

crowdozer · 2023-05-11T11:01:05Z

I bumped into this issue on my personal repo, using sveltekit 1.5.0 and svelte 3.54.0

here's a minimal reproducible sample https://github.com/crowdozer/svelte-kit-scroll-test
happens on brave and chrome, haven't tried others

the gist is this inner "page" div never scrolls on navigation

<div class="flex h-full flex-col overflow-auto">
	<header>
		<!-- header content -->
	</header>
	<div id="page" class="flex grow flex-col">
		<div class="grow">
			<!-- main page content here -->
		</div>
		<footer>
			<!-- footer content -->
		</footer>
	</div>
</div>

my workaround has been to put this in the root layout, now it works fine

import { afterNavigate } from '$app/navigation';

afterNavigate(() => {
	document.getElementById('page')?.scrollTo(0, 0);
});

eltigerchino · 2023-05-11T11:57:15Z

I bumped into this issue on my personal repo, using sveltekit 1.5.0 and svelte 3.54.0

here's a minimal reproducible sample crowdozer/svelte-kit-scroll-test happens on brave and chrome, haven't tried others

the gist is this inner "page" div never scrolls on navigation
<div class="flex h-full flex-col overflow-auto">
	<header>
		
	</header>
	<div id="page" class="flex grow flex-col">
		<div class="grow">
			
		</div>
		<footer>
			
		</footer>
	</div>
</div>
my workaround has been to put this in the root layout, now it works fine
import { afterNavigate } from '$app/navigation';

afterNavigate(() => {
	document.getElementById('page')?.scrollTo(0, 0);
});

Yup, this is a known issue. Sveltekit doesn't know which area to scroll if it's not the window. #8723 attempts to resolve this by adding an attribute you can use to specify the main scrolling area, but it might not be the most clean solution.

jasongitmail · 2023-06-13T23:46:00Z

Likely related, or maybe just more noticeable with this CSS:

html {
  scroll-behavior: smooth;
}

Goal behavior:

On /long-page, clicking #something should scroll smoothly to that element. - Works!
On /long-page, scrolled near the bottom, click /pageB, and it should jump immediately to top of /pageB.

Actual behavior for #2:

When at bottom of long-page, clicking link to /pageB will show /pageB at the previous scroll position and then scroll up to the top smoothly.

eltigerchino · 2023-06-14T07:55:13Z

Likely related, or maybe just more noticeable with this CSS:
html {

  scroll-behavior: smooth;

}
Goal behavior:

On /long-page, clicking #something should scroll smoothly to that element. - Works!

On /long-page, scrolled near the bottom, click /pageB, and it should jump immediately to top of /pageB.

Actual behavior for #2:

When at bottom of long-page, clicking link to /pageB will show /pageB at the previous scroll position and then scroll up to the top smoothly.

This behaviour and the solution are talked more about in
#8724 (comment)

jasongitmail · 2023-06-14T17:54:24Z

Thanks @s3812497. I'd consider that a workaround, not a bug fix. But appreciate you pointing to that code.

kiddailey · 2023-07-27T22:06:43Z

Thanks @s3812497. I'd consider that a workaround, not a bug fix. But appreciate you pointing to that code.

Agreed. And it feels like a particularly hacky workaround for a bug -- it has to be included everywhere and doesn't really address the issue.

Some things I've noticed in my tests with Svelte 3.59.2 and Kit 1.22.3 (I can't update to 4.1.1 yet).

Only Firefox is affected (works correctly in Chromium and Webkit based browsers)
If the user clinks the link a second time after arriving on the destination page (e.g. the same footer link on the second page), The user is sent to the top of the page. In other words, routing between pages maintains the scroll position for the initial page request only.
Including anchor links does not fix the issue or work as expected. For example, given a link to "/page#test" and an anchor "test" on destination page, the user is sent to the incorrect scroll position and not to the anchor's location.
The length of the destination page as compared to the origin page has an impact on whether or not the issue occurs. If the destination page is notably longer than the origin page, it will scroll to the top. It is only when the destination page is of similar length or shorter than the origin page that it refuses to scroll to the top.

Dan1ve · 2023-09-07T18:21:47Z

I have a similar problem. When a navigate from the root page to a details page, the scroll position is not reset.
My suspicion is that this may be caused by nested layouts, but I did not verify this.

I use the following snippet in my +layout.svelte to workaround this bug by forcing a re-render when the URL changes.

{#key $page.url}
<div bind:this={contentContainer} class="flex-1 overflow-auto">
	<slot />
</div>
{/key}

eltigerchino · 2024-01-05T15:59:40Z

Most of the recently reported scrolling issues seem to be divided into 2 different causes:

1. Setting overflow: hidden on the html element.

When using a scrolling area other than html, SvelteKit continues to use window.scrollTo() which will no longer work. The various solutions posted here implement their own scrollTo() to a different element.

Reproduction

Noting #8723 (comment) as a workaround. Perhaps we should document this as a solution?

mkmiller6 · 2024-01-15T03:24:35Z

In my case, scroll behavior is only broken when navigating from root to another page, and only on the initial load. Refreshing the page will then scroll to the top. I'm running SvelteKit 2.3.2 and Svelte 4.2.8.

I tried many of the suggested fixes in this thread, but the only one that worked for me was using the following, or minor variants (e.g. binding to an element and scrollIntoView(), not checking nav type, etc.). The timeout is necessary, and setting the scroll behavior breaks it again.

afterNavigate((nav) => {
  if (nav.type === 'link') {
    setTimeout(() => {
      window.scrollTo(0,0);
    })
  }
})

However, that fix can result in a content flash that's a bit annoying on some loads due to the nature of setTimeout(). Inspired by that fix, the following also works for me and doesn't result in any content flashing.

afterNavigate(async (nav) => {
  if (nav.type === 'link') {
    await tick();
    window.scrollTo(0, 0);
  }}
);

Seems odd, since as far as I can tell, svelteKit natively does something very similar (see here).

Opisek · 2024-02-27T14:07:18Z

Still broken on Firefox. Seems to work on Chrome.

mig-hub · 2024-02-29T14:51:52Z

I still have this problem on both MacOS Safari 16.6 and Chrome 122.0.6261.69. But the weird thing is that it does not do it on every page. But it is consistent in the sense that a link to the "team" page would always keep the previous scroll position. It is really the previous scroll position because I have tried different scroll lengths to verify. The thing is that I cannot pin point what is similar is faulty pages that could cause this.

Since I have checked this thread, I have checked and my html element neither have overflow hidden or scroll-behavior smooth.

Here is what I can confirm though: It is related to the fact that I have a main tag that has min-height at 100vh coupled with the fact that I have a footer below. Because when remove the min-height or when I hide the footer, the problem disappears.

I personally have min-height at 100vh because I have implemented a kind of sticky reveal footer. At first I thought it could be related to the position of the footer being sticky, but when I make it static, the problem still shows.

Here you go, I hope it'll help somebody make sense of this whole issue.

eltigerchino · 2024-02-29T15:02:29Z

Due to how large the scope of this thread has become, it’s difficult to understand how your app’s scrolling is broken, and what is causing it.

It would be a great help for future reports to include a description of the expected behaviour, the current behaviour, and a minimal reproduction in the form a downloadable code repository or stackblitz link so that we can diagnose the root cause.

Opisek · 2024-03-01T14:06:09Z

Looks to me like setting scroll-behavior: smooth breaks scrolling back up on page switch in Firefox, too, as reported by another @AaronNBrock.

Here's my dirty fix in +layout.svelte:

<script>
  // Fix SvelteKit scrolling issue
  import { browser } from "$app/environment";

  beforeNavigate(async (nav) => {
    if (!browser) return;
    document.getElementsByTagName("html")[0].classList.add("pageSwitch");
  })
  afterNavigate(async (nav) => {
    if (!browser) return;
    await tick();
    document.getElementsByTagName("html")[0].classList.remove("pageSwitch");
  });
</script>

<style>
  :global(html.pageSwitch) {
    scroll-behavior: auto;
  }
</style>

TODO: remove when it will be fixed: sveltejs/kit#2733

engageintellect · 2024-03-13T21:22:58Z

Same issue. I haven't found any working solution/hack/work-around. Sadly, none of the solutions mentioned in here seemed to work for me either.

I should also mention that I am unable to reproduce this issue in a desktop browser, even if I make the viewport short enough to make the page scroll-able, and scroll down before navigating to the next link. This issue for me only seems to be happening on mobile browsers.

./package.json

	"devDependencies": {
		"@iconify/json": "^2.2.187",
		"@playwright/test": "^1.28.1",
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"@types/eslint": "^8.56.0",
		"@typescript-eslint/eslint-plugin": "^7.0.0",
		"@typescript-eslint/parser": "^7.0.0",
		"@zerodevx/svelte-toast": "^0.9.5",
		"autoprefixer": "^10.4.16",
		"daisyui": "^4.7.2",
		"eslint": "^8.56.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.36.0-next.4",
		"postcss": "^8.4.32",
		"postcss-load-config": "^5.0.2",
		"prettier": "^3.1.1",
		"prettier-plugin-svelte": "^3.1.2",
		"prettier-plugin-tailwindcss": "^0.5.9",
		"svelte": "^5.0.0-next.1",
		"svelte-check": "^3.6.0",
		"tailwindcss": "^3.3.6",
		"tslib": "^2.4.1",
		"typescript": "^5.0.0",
		"unplugin-icons": "^0.18.5",
		"vite": "^5.0.3",
		"vitest": "^1.2.0"
	},
	"type": "module",
	"dependencies": {
		"@tailwindcss/line-clamp": "^0.4.4",
		"chart.js": "^4.4.2",
		"d3-scale": "^4.0.2",
		"svelte-add": "2024.2.16-0.0"
	}
}

khromov · 2024-04-07T21:30:57Z

@mig-hub

Here is what I can confirm though: It is related to the fact that I have a main tag that has min-height at 100vh coupled with the fact that I have a footer below.

I had a very similar problem and my issue was that I wasn't actually scrolling in the top level page but inside my content div. To fix this, I bound the content div to a variable, and then invoked scrollTop = 0 on it during onNavigate. In my case I had to use onNavigate to work properly with the Page Transitions API but you can probably use either beforeNavigate as well if you don't have any Page Transitions.

<script>
	import { onNavigate } from '$app/navigation';
	let contentDiv;

	onNavigate((navigation) => {
		return new Promise((resolve) => {
			const transition = document.startViewTransition(async () => {
				if(contentDiv) {
					// Fix scroll
					contentDiv.scrollTop = 0;
				}
				resolve();
				await navigation.complete;
			});
		});
	});
</script>

<div class="header">...</div>

<div class="content" bind:this={contentDiv}>
	<slot />
</div>

<div class="footer">...</div>

MoritzLoewenstein · 2024-04-17T10:42:10Z

In this case it broke for me on firefox:

scroll-behaviour: smooth on html element
click on an anchor link -> scrolling to anchor element works
click on a link without a hash value -> page is not scrolled to top, does not change at all
click on the same link a second time -> page will scroll to top

When removing scroll-behaviour, it will work.

elucidsoft · 2024-04-27T22:22:33Z

The problem is not really related to SvelteKit. If you have your using overflow-y-scroll or overflow-x-auto or h-screen (tailwind classes you can lookup the css styles as it also applies) then you will notice this behavior. If you remove those, the behavior returns to normal. This is a known side effect of using these on outer wrappers in CSS. You need to change the outer structure of your HTML to fix the issue.

For me I wanted a custom scrollbar styling and without those classes it wasn't applying. The fix was to apply the custom scrollbar classes to the html element. I could then completely remove all of my h-screen, and overflow-y classes entirely and it all just worked.

etczrn · 2024-07-25T01:55:08Z

I don't know this will help but I got this solution.

// +layout.svelte -- I put the code inside layout svelte so that it can affect every page.

  // 1. Maka a variable that stores old pathname.
  let pathname = '';
  // 2. When the layout page mount, store the pathname.
  onMount(() => {
    pathname = $page.url.pathname;
  });

  // 4. Store the pathname before navigating.
  beforeNavigate(() => {
    pathname = $page.url.pathname;
  });

 // 3. Compare the pathnames and if they are different then make the scroll top.
  afterNavigate(() => {
    if (pathname === $page.url.pathname) return;
    window.scrollTo({ top: 0, behavior: 'auto' });
  });

engageintellect · 2024-08-28T23:52:28Z

Same issue. I haven't found any working solution/hack/work-around. Sadly, none of the solutions mentioned in here seemed to work for me either.

I should also mention that I am unable to reproduce this issue in a desktop browser, even if I make the viewport short enough to make the page scroll-able, and scroll down before navigating to the next link. This issue for me only seems to be happening on mobile browsers.

./package.json

	"devDependencies": {
		"@iconify/json": "^2.2.187",
		"@playwright/test": "^1.28.1",
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"@types/eslint": "^8.56.0",
		"@typescript-eslint/eslint-plugin": "^7.0.0",
		"@typescript-eslint/parser": "^7.0.0",
		"@zerodevx/svelte-toast": "^0.9.5",
		"autoprefixer": "^10.4.16",
		"daisyui": "^4.7.2",
		"eslint": "^8.56.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.36.0-next.4",
		"postcss": "^8.4.32",
		"postcss-load-config": "^5.0.2",
		"prettier": "^3.1.1",
		"prettier-plugin-svelte": "^3.1.2",
		"prettier-plugin-tailwindcss": "^0.5.9",
		"svelte": "^5.0.0-next.1",
		"svelte-check": "^3.6.0",
		"tailwindcss": "^3.3.6",
		"tslib": "^2.4.1",
		"typescript": "^5.0.0",
		"unplugin-icons": "^0.18.5",
		"vite": "^5.0.3",
		"vitest": "^1.2.0"
	},
	"type": "module",
	"dependencies": {
		"@tailwindcss/line-clamp": "^0.4.4",
		"chart.js": "^4.4.2",
		"d3-scale": "^4.0.2",
		"svelte-add": "2024.2.16-0.0"
	}
}

Same here. I am only able to reproduce in chrome for iOS. Everything works as expected in Safari and on desktop browsers of all viewport widths and setting the device to iphone in inspector settings.

I can't seem to fix a hack or work around. It's like chrome on mobile just wants to retain the scroll position of the previous page no matter what.

I remember running into this problem 6 months or so ago, and finding a fix. But I can't, for the life of me remember what I did.

rubenesque-code · 2024-09-05T12:25:01Z

The afterNavigate workaround works for me but with a timeout:

afterNavigate(() => {
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 50);
});

Opisek · 2024-09-06T09:48:33Z

@rubenesque-code You might not have considered the case where you don't want to scroll to the very top, so when you press links with url fragment set (https://example.com/page#fragment). Does my workaround above work for you? I haven't had issues with it since writing my response.

mig-hub · 2024-10-24T13:59:07Z

@khromov Thank you so much for your suggestion and taking the time to provide a snippet!

Sorry I did not see your reply until now. It did not show in the unread messages for some reasons. I will definitely try that when going back to the project I was talking about.

bluwy mentioned this issue Nov 3, 2021

Anchor links broken when navigating across pages #2664

Closed

bluwy added bug Something isn't working p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc. router labels Nov 3, 2021

bluwy mentioned this issue Nov 3, 2021

[fix] reset scroll when navigated from scrolled page #2735

Merged

5 tasks

benmccann closed this as completed in #2735 Nov 5, 2021

d4rekanguok mentioned this issue Nov 22, 2021

feat(poems layout): hide sidebar on scroll karlabrowne/karlakratzpoetry#36

Merged

sbutler-gh added a commit to sbutler-gh/manyworlds that referenced this issue Dec 16, 2021

Rolling back SvelteKit version to fix scrolling issue on page load (s…

b47bf17

…veltejs/kit#2733)

benmccann reopened this Jan 25, 2022

benmccann added this to the 1.0 milestone Jan 25, 2022

bluwy added the pending clarification label Jan 26, 2022

eltigerchino mentioned this issue Jan 5, 2024

Scroll region to utilize in page navigation to persist scroll position of a div element #11522

Closed

artegoser added a commit to artegoser/artegoser-site that referenced this issue Mar 2, 2024

fix: scrolling when navigate

5bb0885

TODO: remove when it will be fixed: sveltejs/kit#2733

Page scroll position not reset to top on navigation (regression) #2733

Page scroll position not reset to top on navigation (regression) #2733

Comments

geoffrich commented Nov 3, 2021

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

rmunn commented Nov 4, 2021

raymclee commented Nov 4, 2021

geoffrich commented Nov 4, 2021

raymclee commented Nov 4, 2021

rosslh commented Nov 6, 2021

bluwy commented Nov 6, 2021

jgrieger commented Nov 24, 2021

bluwy commented Nov 25, 2021

rosslh commented Nov 25, 2021

josh-collinsworth commented Dec 1, 2021

jgrieger commented Dec 8, 2021

andreasnuesslein commented Dec 16, 2021

sbutler-gh commented Dec 16, 2021 • edited Loading

johnknoop commented Jan 25, 2022

akkie commented Jan 25, 2022

jose-manuel-silva commented Jan 25, 2022

nhe23 commented Jan 26, 2022

johnknoop commented Jan 27, 2022 • edited Loading

jose-manuel-silva commented Jan 27, 2022

AutomateAaron commented Apr 30, 2023

eltigerchino commented Apr 30, 2023 • edited Loading

AutomateAaron commented Apr 30, 2023 • edited Loading

eltigerchino commented May 1, 2023

eltigerchino commented May 1, 2023 • edited Loading

AutomateAaron commented May 6, 2023

crowdozer commented May 11, 2023 • edited Loading

eltigerchino commented May 11, 2023 • edited Loading

jasongitmail commented Jun 13, 2023

eltigerchino commented Jun 14, 2023 • edited Loading

jasongitmail commented Jun 14, 2023

kiddailey commented Jul 27, 2023

Dan1ve commented Sep 7, 2023

eltigerchino commented Jan 5, 2024

1. Setting overflow: hidden on the html element.

mkmiller6 commented Jan 15, 2024

Opisek commented Feb 27, 2024

mig-hub commented Feb 29, 2024 • edited Loading

eltigerchino commented Feb 29, 2024 • edited Loading

Opisek commented Mar 1, 2024 • edited Loading

engageintellect commented Mar 13, 2024 • edited Loading

khromov commented Apr 7, 2024

MoritzLoewenstein commented Apr 17, 2024 • edited Loading

elucidsoft commented Apr 27, 2024 • edited Loading

etczrn commented Jul 25, 2024 • edited Loading

engageintellect commented Aug 28, 2024

rubenesque-code commented Sep 5, 2024

Opisek commented Sep 6, 2024 • edited Loading

mig-hub commented Oct 24, 2024

sbutler-gh commented Dec 16, 2021 •

edited

Loading

johnknoop commented Jan 27, 2022 •

edited

Loading

eltigerchino commented Apr 30, 2023 •

edited

Loading

AutomateAaron commented Apr 30, 2023 •

edited

Loading

eltigerchino commented May 1, 2023 •

edited

Loading

crowdozer commented May 11, 2023 •

edited

Loading

eltigerchino commented May 11, 2023 •

edited

Loading

eltigerchino commented Jun 14, 2023 •

edited

Loading

1. Setting `overflow: hidden` on the `html` element.

mig-hub commented Feb 29, 2024 •

edited

Loading

eltigerchino commented Feb 29, 2024 •

edited

Loading

Opisek commented Mar 1, 2024 •

edited

Loading

engageintellect commented Mar 13, 2024 •

edited

Loading

MoritzLoewenstein commented Apr 17, 2024 •

edited

Loading

elucidsoft commented Apr 27, 2024 •

edited

Loading

etczrn commented Jul 25, 2024 •

edited

Loading

Opisek commented Sep 6, 2024 •

edited

Loading