滚动到可滚动 div 中特定 class 的顶部 - 每次单击 up/down 按钮

Question

我有一个 RSS 博客提要（隐藏溢出），在 div 的顶部和底部带有按钮，可以平滑地滚动整个提要。我正在寻找一种方法，以便在每次单击按钮时，它都会滚动到下一个 'rss-item' (class) 的顶部。 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" 中添加了一个 CSS class of "active"。这应该只应用于 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" 具有 "active" class 的任何一个都将以红色突出显示。这有望提供有关单击按钮时发生的情况的视觉提示。

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/

滚动到可滚动 div 中特定 class 的顶部 - 每次单击 up/down 按钮

Scroll to top of a specific class within a scrollable div - on each click of up/down button

javascript

jquery

scroll

scrolltop