Как я могу прокрутить div к определенной точке, основываясь на щелчке соответствующего элемента?

Question

Как я могу прокрутить div к определенной точке, основываясь на щелчке соответствующего элемента?

0

Я пытаюсь настроить пользовательский интерфейс приложения и, по существу, иметь два списка (listA и listB)... list A имеет гиперссылки, которые при щелчке должны автоматически прокручивать listB в конкретный соответствующий элемент в спискеB. На данный момент я бы решил, что он просто прокручивается до TOP EDGE элемента, но в идеале он будет прокручиваться, чтобы элемент находился в центре (по вертикали) спискаB.

heres скрипка, которая показывает, что я пытался, и она работает при первом щелчке, но любой последующий щелчок создает неустойчивые результаты:

эксперимент/демонстрация скрипки

Я считаю, что моя проблема связана с этой строкой кода в примере скрипта - где Im пытается выполнить прокрутку:

$('#listingB').animate({ 
scrollTop: (($('#listingB_item_' + $(this).data('num')).offset().top - $("#listingB").offset().top) )
}, 'slow');

как я могу сделать эту работу так, чтобы каждый щелчок приводил к прокрутке listB к соответствующему элементу?

tamak 21 фев. 2014, в 15:34

Источник

Теги:

jquery

hyperlink

click

autoscroll

2 ответа

0

Используйте #IdOfDivYouWantToScrollTo с параметром href, установленным на #IdOfDivYouWantToScrollTo

<a href="#yourDivId">This link will scroll to the div</a>

<div id="yourDivId">Hello</div>

andrew 21 фев. 2014, в 12:50

0

это предотвратит желаемую анимацию прокрутки.
Volkan Ulukut 21 фев. 2014, в 14:33
0

о, ты ищешь медленный свиток. Мне жаль, что я пропустил эту часть вопроса
andrew 21 фев. 2014, в 14:37
0

Я бы предложил этот manos.malihu.gr/jquery-custom-content-scroller, который я использовал в прошлом, он будет делать то, что вы ищете, вы можете передать в div, который вы хотите прокрутить, анимацию выглядит хорошо
andrew 21 фев. 2014, в 14:40

Показать ещё 1 комментарий

Ещё вопросы

это предотвратит желаемую анимацию прокрутки.
о, ты ищешь медленный свиток. Мне жаль, что я пропустил эту часть вопроса
Я бы предложил этот manos.malihu.gr/jquery-custom-content-scroller, который я использовал в прошлом, он будет делать то, что вы ищете, вы можете передать в div, который вы хотите прокрутить, анимацию выглядит хорошо

Volkan Ulukut · Accepted Answer · 2014-02-21T13-10-00.000Z

JSFiddle: рабочий код

ваша первая проблема, переходя сверху на второй щелчок, потому что вам нужно отменить поведение, если его второй щелчок в строке. и вам также нужно добавить $("#listingB").scrollTop() значения анимации, $("#listingB").scrollTop() прокруткой в B, приводит к тому, что ваш расчет не будет работать должным образом. laslty, если вам нужно показать центр элемента, вы должны вычислить его высоту и добавить половину этого значения в scrollTop. вот как вы должны это сделать:

var i;
var clicked;
for(var i = 0; i < 200; i++) {
    $('#listingB').append('<div id="listingB_item_' + i +'" class="items" data-num="'+ i +'"></div>');
    $('#listingB_item_' + i).html('item number ' + i);

    $('#listingA').append('<div id="listingA_item_' + i +'" class="items1" data-num="'+ i +'"></div>');
    $('#listingA_item_' + i).html('item number ' + i);
}

$('.items1').click( 
    function() {
        if($(this).data('num') != clicked)
        {
            clicked = $(this).data('num');
            $('#listingB').animate({scrollTop: (($('#listingB_item_' + $(this).data('num')).offset().top - $("#listingB").offset().top) + $("#listingB").scrollTop() + ((parseInt($(".items").css("padding-top")) + parseInt($(".items").css("height"))) / 2) + 'px' )}, 'slow');
        }
    }
);