滚动到锚点

Question

Code:

function scroll_page(){

        var target = document.location.hash.replace("#","");
        var selector = 'div[id='+target+']';
        alert(selector);
        $('html,body').animate( {scrollTop: $(selector).offset().top -60}, 2000);
        return false;
    };

Сode is called here:

$(window).on('hashchange', function() {
  scroll_page();
    });

The problem is that when you click on the link jumps sharply to this div , and then gently pulls up to its top .

Answer 1

Try the following code,

$(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140
        }, 1000);
        return false;
      }
    }
  });
});

Answer 2

If you have an anchor in your link like <a href='#id'> , then it will trigger before your JavaScript. hashchange event occurs after the scrolling to the anchor.

To prevent this, you need to bind to click event and prevent default behaviour.

I would do something like this.

HTML:

<a class="slow-scroll" href="#first">First</a>
<a class="slow-scroll" href="#second">First</a>
<a class="slow-scroll" href="#third">First</a>

JS:

$(".slow-scroll").on('click', function(e) {
    var target = $(this).attr("href").substr(1);
    var selector = 'div[id='+target+']';
    alert(selector);
    $('html,body').animate( {scrollTop: $(selector).offset().top -60}, 2000);
    e.preventDefault();
    return false;
});

Here is the JSFiddle Demo .