Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable turbo on anchor scrolling links #130

Merged
merged 3 commits into from
Dec 24, 2021
Merged

Conversation

Lordnibbler
Copy link
Owner

@Lordnibbler Lordnibbler commented Dec 24, 2021

There are two issues at play here:

  • we're using alpine.js to override the click behavior of the <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.
  • doing this prevents 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.
  • turbo (and the old turbolinks we replaced recently) will intercept any <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 the HomeController#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 now

This 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)

@Lordnibbler Lordnibbler merged commit f8e9e0d into master Dec 24, 2021
@Lordnibbler Lordnibbler deleted the turbo-is-fucked branch December 24, 2021 04:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant