滚动到锚

Question

代码：

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这里称为：

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

的问题是，当你点击链接大幅跳跃到这个div，然后轻轻拉至它的顶部。

Answer 1

尝试下面的代码，

$(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

如果你在你的链接像<a href='#id'>有一个锚，那么将你的JavaScript之前触发。在滚动到锚点后发生hashchange事件。

为了防止发生这种情况，您需要绑定到单击事件并防止默认行为。

我会做这样的事情。

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; 
}); 

这里是JSFiddle Demo。