mefechoel / svelte-navigator

Simple, accessible routing for Svelte
Other
505 stars 39 forks source link

In-page jumps to fragment links don't work with programmatic navigation #5

Open mefechoel opened 4 years ago

mefechoel commented 4 years ago

Describe the bug

See #3:

when navigating to a Route, that is not already rendered, the browser will check for a jump mark immediately, but of course rendering the Route takes some time, so the browser won't find the element and won't scroll the page.

I think there are two possible ways to solve this. Either, when calling navigate, e.g. by clicking a Link, we need to update the Routers internal location first, wait for the Routes to render, and then call history.pushState. But there is probably a lot of tricky work to be done. The second possibility is to assign window.location.href back to itself, after all Routes have rendered. This however triggers a popstate event in some browsers, which the Router will interpret as a new navigation, so we need to make sure, not to cause infinite loops by accident.

To Reproduce

... some content ...
<Route path="myRoute">
  <main id="main">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </main>
</Route>

When opening /myRoute#main, the page does not scroll to the main Element. The same happens, when navigating to a Route via a Link or navigate.

Expected behavior The page should scroll to the element, referenced by the fragment.