kit: Anchor links broken when navigating across pages

Found a fix 🎉. PR incoming

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.

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,

Thanks everyone who was involved in resolving this 🙏!

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

@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.

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.

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();
    }
  }
}

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