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

How to make the scroll bar to move to a accurate place

本文关键字：一个 位置 滚动条 何使 移动      更新时间：2023-09-26

我有一个滚动条列表。还有一个按钮，当按下时，它会移动到某个#id，滚动条也会移动，使该元素可见。但这并不准确。它会移动，但并不总是移动到正确的位置。我怎样才能使这个滚动功能是准确的:

演示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');
}

在演示中尝试按下next按钮，你会看到在一些项目中滚动条移动但不正确。

任何想法?

代码的问题是，当您向下滚动列表时，您将获得每个元素的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++;
}

这个小提琴展示了它的作用。它的作用是获取当前元素的高度+边距，然后乘以列表中你所处的元素个数。

这只适用于所有元素大小相同且id为增量的情况。

如果你想让它与动态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++;
}

还有小提琴

相关文章：