Javascript smooth scroll conflict

Question

I am using the pretty standard smooth scrolling javascript to link to anchor points on the same pages in my wordpress site and it works fine. However, I get no response from a link/button when trying to open an anchor point on another page. It's like the link/button is completely dead. It works fine if I right click on it and select open in a new tab. It also works if I remove the offending javascript from the site header. Can anybody suggest where the conflict may lie? For those who may not be familiar, this is the offending code:

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

Answer 1

This code seems to assume that every link to an anchor will be to the anchor on the current page. You need to add code to detect if the link is going to a different page, and if so, navigate directly there (rather than attempt the smooth-scroll effect to the anchor on the current page).

Add this code to the beginning of your click handler:

if ( document.URL.replace(/#.*$/, "") != $(this).attr('href').replace(/#.*$/, "") ) {
    // Link goes to a different URL than the current page (not counting the hash)
    document.location.href = $(this).attr('href');
    return;
}