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

好的，所以我尽我所能在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/