Question

我正在尝试微调应用程序的UI并且基本上有两个列表（listA和listB）...列表A具有超链接，应该在单击时自动将listB滚动到listB中的特定对应元素。现在我只想滚动到元素的顶部边缘，但理想情况下它会滚动，因此项目位于listB的中心（垂直）。

这是一个显示我尝试过的小提琴，它在第一次点击时起作用，但任何后续点击都会产生不稳定的结果：

fiddle experiment / demo

我相信我的问题与小提琴示例中的这行代码有关 - 我试图完成滚动：

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

如何使这项工作成为可能，每次点击都会导致listB滚动到相应的项目？

Answer 1

JSFiddle：工作代码

您的第一个问题，在第二次点击时排在首位是因为如果连续第二次点击，您需要取消该行为。并且您还需要将$("#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');
        }
    }
);

Answer 2

使用href设置为#IdOfDivYouWantToScrollTo

的锚点

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

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

如何根据相应元素的点击将div滚动到特定点？

2 个答案: