滚动到锚点

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

请尝试以下代码

autorun.inf

Answer 2

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

要防止这种情况，您需要绑定到click事件并防止默认行为。

我会做这样的事情。

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。