Anchor links broken when navigating across pages

[mikenikles]

Describe the bug

I upgraded to next.188 yesterday and notice anchor links no longer work across pages.

Steps to reproduce

1. Navigate to https://deploy-preview-1131--gitpod-kumquat.netlify.app/blog
2. Click "Sign up" at the top right

Actual result
The homepage loads, scrolled to the top

Expected result
The homepage loads, scrolled down to the Get Started Now section.

Note, if you click "Sign Up" again after step 2 (i.e. when you're on the homepage), the anchor link works.

Has anyone else seen this? I've been looking through Discord and GitHub, not much luck so far but will continue to search.

Reproduction

1. npm init svelte@next & follow the instructions
2. In src/routes/index.html add a bunch of <br /> elements to make the page scrollable, then add <h1 id="jump-here">Here is a page anchor</h1> at the bottom of the page
3. In src/routes/about.html add a link: <a href="/#jump-here">Jump to section on homepage</a>

Logs

No response

System Info

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 136.04 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - /usr/local/bin/node
    npm: 7.7.6 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 94.1.30.87
    Chrome: 95.0.4638.54
    Edge: 93.0.961.47
    Firefox: 92.0
    Firefox Developer Edition: 88.0
    Safari: 14.0.3
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.188 
    svelte: ^3.34.0 => 3.44.0

Severity

blocking an upgrade

Additional Information

No response

[rosslh]

I noticed this on my personal website and had to add a workaround here. If SvelteKit caused this, the bug was introduced between 1.0.0-next.185 and 1.0.0-next.187 (inclusive).

[mikenikles]

Nice, thanks for narrowing this down to these versions - and for posting the workaround 🙏.

I'm about to debug the SvelteKit source code to figure out what exactly causes it. I'm going to start my investigation around here (diff).

Will report back with findings.

[rosslh]

Actually I think I was wrong about the versions. The first version of my site with the issue appears to be rosslh/rosshill.ca@d4834d4, so the bug must have been introduced between and 1.0.0-next.169 and 1.0.0-next.179

[mikenikles]

Alright, https://github.com/sveltejs/kit/blob/master/packages/kit/src/runtime/client/renderer.js#L285 returns null when I debug the code.

Once navigation completes, the document.getElementById() call returns the expected element.

👀

[mikenikles]

Found a fix 🎉. PR incoming

[mikenikles]

FYI for anyone else blocked by this. Inspired by @rosslh, I ended up adding the following to __layout.svelte to unblock myself until the PR gets merged.

$: if ($page.path) {
  // Workaround until https://github.com/sveltejs/kit/issues/2664 is fixed
  if (typeof window !== "undefined" && window.location.hash) {
    const deepLinkedElement = document.getElementById(
      window.location.hash.substring(1)
    );
    if (deepLinkedElement) {
      deepLinkedElement.scrollIntoView();
    }
  }
}

[mquandalle]

I have updated my app to use the latest version of kit (next.193), and I still experience this issue.

[mikenikles]

With next.193, here's what I experience...

Setup

• a.svelte contains my anchor
• b.svelte links to a.svelte

❌ Does not work

1. Navigate to /b
2. Click on link to /a
3. /a is scrolled to the top, not the anchor

✅ Does work

1. Navigate to /b
2. Reload the page twice (yep, 2 times)
3. Click on link to /a
4. /a scrolls to the anchor as expected

@mquandalle could you try to reload the page twice in your project and let me know that I'm not crazy 😕?! If you see the same, I'd feel a bit better - although can't explain why it happens.

[bluwy]

I tried testing this again but I'm not experiencing the bug, it all seems to work as usual. We may need another repro repo for this.

[jaymakes11]

After upgrading from 192 to 193 I'm seeing a bug introduced where normal scroll behavior on app navigation is not setting the scroll to the top of the document (when it should be). E.g. i'm scrolled half way down my home page, I could on a link to view my about page, I'm brought to half way down my about page (not the top of my about page).

Commenting on this here since it seems to be a regression caused by #2720 (which was intended to fix this issue). I can open a new issue for this if need be.

[bluwy]

@yet-another-dev Looks like the the issue you described is opened at #2733. I think it's good the separate these issues at the moment since they're explaining conflicting scrolling scenarios (?). Maybe it's the same core issue but I'll try to look into this again today.

[benmccann]

Does this work any better with the latest version 1.0.0-next.194?

[mquandalle]

I have updated to next.194 and still experience the issue: https://bonforfait.fr/operateurs/free#box-internet

The page is correctly scrolled on first load (probably SSR + browser handling) and then jumps to the top. This is a simple anchor without any specific logic.

[bluwy]

@mquandalle Can you provide a minimal reproduction to help isolate the bug? Probably the time where it would scroll to the top is if:

• You scroll to top manually
• You called goto on the same current page

But otherwise the change we did for routers recently only affects inter-route navigation, not on initlal page load, so I'm not sure how it happened.

[mquandalle]

This was actually an issue with a third-party library.
I reported the issue in flekschas/svelte-simple-modal#53, sorry for the noise here!

[bluwy]

Thanks for the update. @mikenikles Can you confirm that this still happens? Otherwise we can go ahead and close the issue.

[mikenikles]

I can confirm, this works in my case on 1.0.0-next.194 🎉!

[mikenikles]

Thanks everyone who was involved in resolving this 🙏!

[Pixcell]

Hello everyone,

Not exactly sure where to post this.
I have encountered the exact same issue.

routes/pageA.svelte

<a href='/pageB#Test' target='_blank'>Page B Test</a>

routes/pageB.svelte

<div style="min-height: 150vh;" />
<div id="#test">Test</div>

Clicking on the link in page A would bring me to the top of page B, ignoring the anchor.

The only working solution was to use the workaround presented above, adding a small timeout before the scroll intoView

	$: if ($page.url.hash) {
  // Workaround until https://github.com/sveltejs/kit/issues/2664 is fixed
  if (typeof window !== "undefined" && window.location.hash) {
		const deepLinkedElement = document.getElementById(
			window.location.hash.substring(1)
			);
    if (deepLinkedElement) {
      window.setTimeout(() => deepLinkedElement.scrollIntoView(), 100);
    }
  }

  "name": "@sveltejs/kit",
  "version": "1.0.0-next.312",

NB: It works fine if the anchor is on the same page

Please let me know if you need me to open a new issue
Thank you,

[jeromecc]

Hi! Same here with @sveltejs/[email protected], external links with # anchor land at the top of the page while links within the same page work as expected. IMHO this issue should be reopened. Thanks.

[benmccann]

I can't reproduce the issue. Please provide a repository with steps to reproduce

[kiddailey]

FYI - it seems that this issue is only resolved for Chromium-based browsers. In Firefox (108.0.2), the issue still remains.

I've installed @sveltejs/[email protected], @sveltejs/[email protected], and @sveltejs/[email protected] and none of them seem to resolve the issue for me in Firefox and I do not see any errors or other console output. As I said, it works fine in Chromium.

[AC-LJ]

I wound up here because I was having this problem in an inconsistent, "peek-a-boo" fashion for days and it was driving me insane; I had occasional success navigating with cross-page anchor links but, the overwhelming majority of the time, I would try to go to a specific id on a separate internal page and the window would scroll a few pixels on arrival and then hang up.

I did find a fix, though I have no idea how broadly applicable it is. I'm just posting it for the next person who might or might not have the same problem. On the target page, I was tracking the vertical scroll with...

svelte:window(bind:scrollY)

That's Pug syntax, but you get the point.

Getting rid of that special element (and, of course, all related code) un-broke the cross-page anchor links. Bringing it back broke them again. So far, over a period of days, I've re-tested this observation and it's one-to-one.

I don't understand the deeper mechanics, but I'm fairly confident that this vertical scroll binding to the svelte:window element is the isolated x-factor because I found a workaround with vanilla JS to accomplish what I was doing with the binding, and the cross-page anchor links still work with the workaround in place.

[coryvirok]

I'm also running into this behavior when I directly navigate to a URL with an anchor that is meant to scroll the page down to that id. I haven't found any svelte:window scroll binding (or any scroll binding) in the code on the page in question. But no doubt there is some in other components loaded on other pages. Or, possibly in 3rd party libs like Superforms/Popper.

The behavior I see is:

1. navigate to http://example.com/#pricing
2. page loads and immediately begins scrolling to #pricing (I have smooth scrolling enabled)
3. 2-500ms later, the page immediately sets the window position back to the top

The workaround mentioned above (and pasted below) isn't ideal since it happens after the improper Svelte scrolling and causes visual jitter on the page. But it's better than nothing.

Including @jjagielka workaround from the linked PR:

  // from https://github.com/themesberg/flowbite-svelte/pull/923/files
  onMount(() => {
    // Workaround until https://github.com/sveltejs/kit/issues/2664 is fixed
    if (typeof window !== 'undefined' && window.location.hash) {
      const deepLinkedElement = document.getElementById(window.location.hash.substring(1))
      if (deepLinkedElement) {
        window.setTimeout(() => deepLinkedElement.scrollIntoView(), 100)
      }
    }
  })

[MoritzLoewenstein]

Dont know if related, but if I want navigate from anchor link to a page without an anchor link, the scroll to top does only work the second time in firefox, in chrome it seems to work fine: #2733 (comment)