如何使滚动条移动到一个准确的位置

我有一个滚动条列表。还有一个按钮，当按下它时，它会移动到某个#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

如何使滚动条移动到一个准确的位置

回答

相关问题