Question

我在网上搜索并尝试了很多东西但是scrollTop是随机滚动的。我想在点击链接时在div中滚动。

我的div：

<div id="test" style="height:400px; overflow-y: auto;">
    <img src="basjhdba1.jpg" id="item_1">
    //longtext here
    <img src="basjhdba2.jpg" id="item_2">
    //longtext here
    <img src="basjhdba3.jpg" id="item_3">
    //longtext here
</div>

三个链接：

<a href="javascript:void(0);" onclick="changeItemDisplay(1)">Item 1</a>
<a href="javascript:void(0);" onclick="changeItemDisplay(2)">Item 2</a>
<a href="javascript:void(0);" onclick="changeItemDisplay(3)">Item 3</a>

onclick方法：

changeItemDisplay: function(a)
{
    var target = "#item_"+a;

    $("#dishesresults").stop().animate({scrollTop: ($(target).position().top)+"px"}, 800);
}

这不能正常工作，但它们有一些滚动模式。即使我连续两次点击一个链接，它也每次都在移动。不知道是什么原因引起的。

Answer 1

你的div是随机滚动的，因为你没有检查它的位置。

您需要知道可滚动区域（scrollTop）上方视图中隐藏的像素数量以及$('#test')相对于文档（offset）的当前位置。

作为旁注：更好的想法是使用jQuery的.click()方法而不是使用onclick 事件属性绑定事件处理程序，and this is why.

JSFiddle（使用Bram Vanroy模板）

<a href="#item_1" class="changeItem">Item 1</a>
<a href="#item_2" class="changeItem">Item 2</a>
<a href="#item_3" class="changeItem">Item 3</a>

<script>

    $(function () {
        $('.changeItem').click(function (e) {
            e.preventDefault();
            var target = $(this).attr('href');
            $('#test').stop().animate({
                scrollTop:  $('#test').scrollTop() - $('#test').offset().top + $(target).offset().top
            }, 800);
        });
    });

</script>

div中的scrollTop无法使用<a> tag</a>上的onclick

1 个答案: