Disable turbo on anchor scrolling links #130
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There are two issues at play here:
<a>
tags in the navigation which link to page anchors on the homepage. so, instead of "jumping" immediately to the anchored section of the page, we disable the default browser behavior, and scroll the anchored section into view for a more seamless experience.history.pushState
(or whatever the browser uses internally to set the URL when a user clicks a link) from happening. so as such, we dont end up with/#about
or/#work
appended to the URL. this breaks the browser's back button behavior.<a>
click and attempt to replace ONLY the part of the page which changes. however, with anchor links this behavior is a little janky, and it appears to still make a request to theHomeController#show
endpoint even though it is just an anchor link. they claim to have fixed this (Turbolinks should follow same-page anchor links without reloading the page turbolinks/turbolinks#75) but i don't see this fix working, so we disable turbo for the anchor link<a>
tags for nowThis PR disables turbo for the anchor links in the navigation, which fixes a lot of the buggy behavior from turbo. However, the alpine.js code still makes it such that the anchor isn't appended to the url. i tried doing this with native js instead of alpine (https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link) and same issue occurs, no URL change when clicking anchors. also tried pure CSS
scroll-behavior: smooth
and this is just super inconsistent between browsers. firefox only works for anchors that are visible on the page, chrome works fine, and safari doesnt work at all (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)