滚动到可滚动 div 中特定类的顶部 - 每次单击向上/向下按钮

Question

我有一个 RSS 博客提要（隐藏溢出），在 div 的顶部和底部带有按钮，可以平滑地滚动浏览提要。我正在寻找一种方法，以便在每次单击按钮时，它都会滚动到下一个“rss-item”（类）的顶部。 div 看起来像这样：

所以我想要实现的是，每次单击向下箭头（或向上）时，当每个“rss-item”位于 div 顶部时，滚动都会停止。 我探索了许多类似的问题，但无法完全实现我想要的。

这是用于在 div 内平滑滚动的函数：

 $(document).ready(function() {

    var scrollTime = 900;

$('#upClick').click(function() {
    $('#homeBlogs').animate({
        scrollTop: $('#homeBlogs').scrollTop() + 200
    }, scrollTime);
});


$('#downClick').click(function() {
    $('#homeBlogs').animate({
        scrollTop: $('#homeBlogs').scrollTop() - 200
    }, scrollTime);
});


});

这是生成的源 html 的屏幕截图：

Answer 1

好的，所以我尽我所能在 jsfiddle 中重新创建了它。这是HTML结构。我尝试根据屏幕截图构建它，所以它们应该是相似的。注意：我在第一个“rss-item”中添加了一个“active”的 CSS 类。这应该只在 HTML 中应用于第一项，并且需要保留在此处以使 Javascript 部分正常运行。

<div id="blogSection">
    <div class="row" id="scrollUp">
        <button class="scrollButton" id="upClick">Scroll Up</button>
    </div>
    <div id="homeBlogs">
        <div class="rss-box">
            <p class="rss-title"></p>
            <ul class="rss-items">
                <li class="rss-item active">
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                </li>
                <li class="rss-item">
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                </li>
                <li class="rss-item">
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                </li>
                <li class="rss-item">
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                </li>
                <li class="rss-item">
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                </li>
                <li class="rss-item">
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                    <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
                </li>
            </ul>
        </div>
    </div>
    <div id="scrollDown" class="row">
        <button class="scrollButton" id="downClick">Scroll Down</button>
    </div>
</div>

接下来，这是我使用的 CSS。这纯粹是为了支持演示。我进行了设置，因此无论哪个“rss-item”具有“活动”类，都将以红色突出显示。这有望为单击按钮时发生的情况提供视觉提示。

button {
    display: block;
    width: 100%;
    background-color: black;
    color: white;
    height: 50px;
    cursor: pointer;
}

#scrollUp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#scrollDown {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.active {
    color: red;
}

最后，这是我用来完成任务的 Javascript。我对其进行了很多更改，以帮助提高效率并纠正一些错误。

$(document).ready(function() {})
//we can use one single event and modify the behavior based on the direction that was clicked
.on('click', '.scrollButton', function() {
    var scrollTime = 900,
        direction = $(this).attr('id'),
        $currentItem = $('.rss-item.active'),
        $newItem;

    switch (direction) {
        case 'upClick':
            $newItem = $currentItem.prev('.rss-item');
        break;

        case 'downClick':
            $newItem = $currentItem.next('.rss-item');
        break;
    }

    //if we aren't at the top or bottom of the list already
    if ($newItem.length > 0) {
        //since we know we can now change the active item, we need to remove this class so we can apply it to the new item
        $('.rss-item').removeClass('active');

        $newItem.addClass('active');
    }

    //Now that the logic is out of the way, we can run the scroll animation
    //Also, I think you will want to use 'html, body' as a selector so the page itself moves
    $('html, body').animate({
        scrollTop: $('.rss-item.active').offset().top - 200 //this will keep content positioned correctly, but you shouldn't need both a '+ 200' and '- 200' here. Adjust this value as needed.
    }, scrollTime);
});

最后，这里是 jsfiddle：https://jsfiddle.net/sm1215/sebgbnr4/