如何使滾動條移動到一個準確的位置

我有一個滾動條列表。還有一個按鈕，當按下它時，它會移動到某個#id並且滾動條也會移動以使該元素可見。但它不準確。它移動，但並不總是到達確切的地方。我怎樣才能讓這個滾動功能是準確的：如何使滾動條移動到一個準確的位置

DEMO http://jsfiddle.net/danials/anpXP/1/

我的jQuery代碼：

function next() { 
    $(".list li").css("background", "grey"); 
    goToByScroll(myID); 
    $("#" + myID).css("background", "red"); 
    myID = $("#" + myID).next("li").attr("id"); 
} 

function goToByScroll(id) { 
    $('.list').animate({ 
     scrollTop: $("#" + id).offset().top - $("#" + id).height() 
    }, 
     'slow'); 
}

在演示嘗試按一個按鈕，你會在一些項目看滾動移動但不正確。

有什麼想法？

來源

2014-07-06 Daniel JJ

問題是，在所有其他'GoToByScroll'中，'offset（）。top'增加1而不是適當的數量，不知道爲什麼，但是你可以從那裏開始。 – sharf

[這jsfiddle]（http://jsfiddle.net/anpXP/2/）將工作。問題在於，隨着屏幕的滾動，元素的偏移量會隨着靠近頁面頂部而發生變化。 – sharf

您的代碼存在的問題是您在向下滾動列表時正在獲取每個元素的offset。

Offset是：

The .offset() method allows us to retrieve the current position of an element 
relative to the document.

所以這使得盒子小的offset，進一步向下列表你走。

你需要做的是找出元素的高度+緣是什麼，以及做一些數學：

var myID = $(".list").children().first().attr("id"); 

function next() { 
    var li = $("#"+myID); 
    $(".list li").css("background", "grey"); 
    var offset = parseInt(li.height())+parseInt(li.css("margin-top")); 
    $('.list').animate({scrollTop: offset*(myID-1)},'slow'); 
    $("#"+myID).css("background", "red"); 
    myID++; 
}

這fiddle顯示它在行動。它所做的是獲取當前元素的高度+邊距，然後將其乘以列表中的元素數量。

這隻適用於假定所有元素都是相同大小，並且它們具有增量ID。

UPDATE

如果你想使之與動態ID的工作，你做的是設置一個增量變動來跟蹤你有多少通過迭代，再抓下一個ID類似於如何你之前：

var myID = $(".list").children().first().attr("id"); 
var inc = 1; 

function next() { 
    var li = $("#"+myID); 
    $(".list li").css("background", "grey"); 
    var offset = parseInt(li.height())+parseInt(li.css("margin-top")); 
    $('.list').animate({scrollTop: offset*(inc-1)},'slow'); 
    $("#"+myID).css("background", "red"); 
    myID = $("#"+myID).next().attr("id"); 
    inc++; 
}

而且這裏有一個fiddle。

來源

2014-07-06 22:57:22 sharf

我試圖製作一個適用於不同ID的不同版本（不是增量版本）。它還沒有工作。你可以看看嗎？ [http://jsfiddle.net/danials/anpXP/8/](http://jsfiddle.net/danials/anpXP/8/） –

@DanielJJ對不起，花了這麼長時間纔回復。我已經用動態ID版本更新了我的答案。 – sharf

如何使滾動條移動到一個準確的位置

回答

相關問題