滾動頁面到錨點

Question

我正在玩的站點上有一些錨點，我希望它們滾動到錨點，而不是突然跳到錨點。 我已經嘗試過在堆棧溢出時在這里發布幾個解決方案，但是還無法使它們正常工作。 難道我做錯了什么？

我已經試過了這段代碼，有些人喜歡它，但是它們卻無法正常工作：

$('a').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});

該站點位於此處，當前僅錨定“關於我們”項目： http ： //jsfiddle.net/pnKu2/

Answer 1

首先，不要選擇所有錨，而應只選擇導航IE：

$('.menu-hover-underline').click(function(){
    return false;
});

接下來擴展此功能以包括滾動

$('.menu-hover-underline').click(function(){
    var divId = $(this).text().toLowerCase();
    $('html, body').animate({
        scrollTop: $("#"+divId).offset().top
    }, 500);
    return false;
});

參見jsfiddle http://jsfiddle.net/pnKu2/2/

請注意，由於about div以外的所有id均為id =“ title”，因此我更新了您的div ID。

Answer 2

您可以這樣嘗試：

$('a').click(function(e){
     var href = $(this).attr("href");
     var offsetTop = href === "#" ? 0 : $(href).offset().top;

     $('html, body').stop().animate(
     { 
       scrollTop: offsetTop
     }, 1000);

     e.preventDefault();
});

演示

Answer 3

嘗試這個

$(function() {
    $('a').click(function(e){
        var top = $( $(this).attr('href') ).offset().top;
        $('html, body').animate({
            scrollTop: top
        }, 500);
        return false;
    });
});