Блог

У меня есть список с полосой прокрутки. Также есть кнопка, при нажатии на которую она перемещается в определенное место #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');
}
  

В демо-версии попробуйте нажать кнопку далее, и вы увидите, что в некоторых элементах прокрутка перемещается, но не корректно.

Есть идеи?

Проблема с вашим кодом заключается в том, что вы получаете 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  ;
}
  

Эта скрипка показывает это в действии. Что он делает, так это получает высоту поле текущего элемента, а затем умножает это на то, сколько элементов находится в конце списка.

Это работает только при условии, что все элементы имеют одинаковый размер и что у них есть инкрементные идентификаторы.

Обновить

Если вы хотите заставить это работать с динамическими идентификаторами, все, что вам нужно сделать, это установить инкрементную переменную для отслеживания того, сколько вы выполнили итераций, а затем получить следующий идентификатор аналогично тому, как вы делали раньше:

 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  ;
}
  

И вот фишка.