search

roxiness / routify

Automated Svelte routes
https://routify.dev
1.85k stars 86 forks source link

Anchors / scroll into view #550

Closed xboxfly15 closed 2 months ago

xboxfly15 commented 2 months ago

I have been trying to get anchors to work, by that I mean externally(you're not already browsing the site) clicking a URL that has a hash at the end, to visit the website and the area scrolling into view. This doesn't seem to be apart of Routify. I have done some digging and done my best to get it working. I am mainly using this to document so people can find a solution and I think there's 1 or 2 bugs that need fixing.

First off the bugs I think I found: When visiting the URL, I get this error b1914817124512083GVidY816b 1 Relating to state being null at https://github.com/roxiness/routify/blame/d1decc0469e8191f0c6b8c25114c06da144dd07a/lib/runtime/Router/urlReflectors/Address.js#L42 I removed ".routify" to fix that issue.

I noticed when navigating forward/backwards I get a new error, that I haven't been able to solve and not sure what it relates to: 896e681712451599dzfppe817b 1 7bc9181712451681J1TDSD818b 1 It is the same line as the other bug, I haven't noticed anything breaking though so I continued.

I then added this code to my layout _module.svelte file afterUpdate(() => setTimeout(() => document.getElementById(location.hash.slice(1))?.scrollIntoView(), 500)) Along with smooth scrolling css, this allows anchors to work and scroll into view.

Hope this helps people in the future when trying to get anchors to work and hopefully those errors can be fixed. Thank you contributors for your hard work.

jakobrosenberg commented 2 months ago

Thanks for filing the issue, @xboxfly15 .

Do you also see this bug if you copy paste the url into a new tab?

jakobrosenberg commented 2 months ago

:tada: This issue has been resolved in version 3.0.0-next.223 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

xboxfly15 commented 2 months ago

Thank you! This solved all the errors and I was able to remove that snippet of code from my _module.svelte and it still scrolls into view!