Question

我有这个html结构

.honors设置为overflow: auto并修复高度。

我该怎么做才能滚动到每个元素

<div class="honors">

 <p><span class="title-red t1">Title1</span content ...</p>
 <p><span class="title-red t2">Title2</span content ...</p>
 <p><span class="title-red t3">Title3</span content ...</p>
 <p><span class="title-red t4">Title4</span content ...</p>

</div>

<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>

这是我的jquery代码

    jQuery(function($) {
    var step = 50;
    $("#scrollUp").on("click", function (event) {
        // Animates the scrollTop property by the specified
        // step.
        $(".honors").animate({
            scrollTop: 0
        },2000);

         event.preventDefault();
    })


    $("#scrollDown").on("click", function (event) {
        $(".honors").animate({
            scrollTop: "+=" + step + "px"           
        }, 500);
         event.preventDefault();
    })
})

Answer 1

您可以使用jquery.scrollTo滚动到特定元素，如下所示：

var nextElem;
$("#scrollDown").on("click", function (event) {
    if (nextElem === undefined) {

        nextElem = $('.title-red').next();
    } else {

        nextElem = nextElem.next();
    }
    $(".honors").scrollTo(nextElem, 800, {
        margin: true
    });
    event.preventDefault();
})
})

小提琴：JSFiddle

别忘了包含scrollTo插件。此外，您还必须调整#scrollTop方法，因为它只是滚动到第一个元素。

滚动到每个span元素

1 个答案: