滚动到可滚动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/