单击链接时禁用默认锚跳转

Question

I've searched hours and finally found a light jQuery code which allows me to animate the click of an anchor link, but when I click on one link it animates down and then jump 100px to the top without animation because the hash is given to the url after the animation which leads to the default anchor link behavior when you click it.

I have a code sample for you with a little comment from me for a fix, or well I thought It'll be a fix...

// Scroll.js (https://css-tricks.com/snippets/jquery/smooth- 
scrolling/#comment-1635851)

/*
*   Scroll.js:
*   1. added -100 after the .top property which reflects the navigation height.
*/

$(document).ready(function(){

// Add smooth scrolling to all links
$('a').on('click', function(e) {

  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
    // Prevent default anchor click behavior
    e.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-100 // /* [1] */
    }, 800, function(){

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

});

Answer 1

Just write on the anchor href attribute javascript::void(0) as in

<a href="javascript:void(0)"></a>

Though if you want it to act as an anchor and have a url... this will not work :(