在javascript或jquery中滾動到具有特定ID的html元素

Question

我有分配了id的html元素。 現在我想滾動到那些元素。 我看到jQuery有一個scrollTop，它取一個整數值。我怎樣才能輕松地創建一個id滾動到頂部的特定html元素？ 理想情況下，動畫很漂亮。

快速搜索顯示了許多滾動插件......如果上述功能需要插件，那么最受歡迎的插件是什么？ 我也在使用jquery-ui。

Answer 1

你可以使用這樣的東西在頁面加載時滾動到#someElement ：

$(document).ready(function() {
    $("html, body").animate({scrollTop: $("#someElement").offset().top}, 1000); 
});

它只是動畫化body元素的scrollTop屬性，並使用某個特定元素的頂部偏移量作為要滾動的位置。 動畫持續1000毫秒。

注意：它選擇html和body因此它適用於各種瀏覽器。 我不確定具體細節，但一些快速測試顯示Chrome使用body ，但Firefox和IE使用html 。

這是一個有效的例子 。

Answer 2

請考慮以下代碼段：

$('#myDiv').bind('click',function(){

    var pos = $(this).offset().top,
    scrollSpeed = 2;

    for (var i = pos; i > 0; i=i-scrollSpeed) {
        $(window).scrollTop(i);
    }
}); 

例如，它在點擊時滾動綁定到#myDiv元素。 代碼確定#myDiv元素的位置，而不是計算滾動步數（速度/平滑度）。 比jQuery .scrollTop（）還要好。