Smooth scroll breaks back button

[danieljl]

Current Behavior

Smooth scroll is triggered when a link to a different section on the same page is clicked, e.g. when clicking a table of contents. After clicking a section on a table of contents, users often want to go back to the table of contents. However, users cannot do that because the URL is not appended with the hash (section ID). This can be demonstrated at https://kswedberg.github.io/jquery-smooth-scroll/demo/.

Proposed Solution:

1. Disable smooth scroll; or
2. Enable hashchange feature of jQuery smooth scroll. There are two ways to do that:
   a. Using native hashchange DOM event: demo, source code.
   b. Not using native hashchange DOM event: demo, source code.

[mmistakes]

2a looks fine to me if you want to go ahead and submit a pull request.
I tested it locally and all you'd need to do is:

1. Replace this line in assets/js/_main.js with:

// Bind the hashchange event listener
  $(window).bind("hashchange", function(event) {
    $.smoothScroll({
      // Replace '#/' with '#' to go to the correct target
      scrollTarget: location.hash.replace(/^\#\/?/, "#"),
      offset: -20
    });
  });
  $('a[href*="#"]').bind("click", function(event) {
    // Remove '#' from the hash.
    var hash = this.hash.replace(/^#/, "");
    if (this.pathname === location.pathname && hash) {
      event.preventDefault();
      // Change '#' (removed above) to '#/' so it doesn't jump without the smooth scrolling
      location.hash = "#/" + hash;
    }
  });
  // Trigger hashchange event on page load if there is a hash in the URL.
  if (location.hash) {
    $(window).trigger("hashchange");
  }

2. Rebuild assets/js/main.js by running npm run build:js from root
3. Commit the changed _main.js and main.js files and push up.

[danieljl]

Hi @mmistakes, I just created a PR for this. I'm also thinking to create a feature knob for smooth scroll so it can be disabled. Could you guide me on how to do it? Thanks.

[mmistakes]

Don’t think that can be done easily without over complicating the theme.
Since the JS is precompiled in the theme there is no way to hook a site variable in there to do some sort of Liquid logic to not include the smooth scrolling stuff.

I guess it could be pulled out into its own script file and then conditionally loaded via some config flag, but that seems unnecessarily complicated.

[stale]

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please consider whether it can be accomplished in another way. If it cannot, please elaborate on why it is core to this project and why you feel more than 80% of users would find this beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.