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

Question

我有一个 RSS 博客提要( overflow hidden )，在 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”中添加了一个 CSS 类“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”都将以红色突出显示。这有望提供有关单击按钮时发生的情况的视觉提示。

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/