jquery - 向上/向下滚动到带有固定按钮的部分

Question

我想构建一个脚本来向上/向下滚动到页面的部分标记。我的源代码如下所示:

HTML:

<div class="move">
    <div class="previous">UP</div>
    <div class="next">DOWN</div>
</div>
<section>First</section>
<section>Second</section>
<section>Third</section>
<section>Fourth</section>

CSS:

section{
    height: 400px;
    border: 1px solid black;
}

.move{
    position: fixed;
    bottom: 0;
    right: 0;
}

我还有两个固定在页面底部的按钮。

现在我想制作一个用于向上/向下滚动到部分的脚本。如果有人在这种情况下刷新网页怎么办 - 例如第 2 部分将位于页面顶部？如何确定当前最靠近页面顶部的部分？

Here is fiddle.

Answer 1

以下示例使用页面的当前滚动位置来确定需要滚动到哪个部分元素而不是显式变量，如果用户手动滚动到不同的部分然后按导航按钮。

$(function() {
    var $window = $(window);
    $('.next').on('click', function(){
        $('section').each(function() {
            var pos = $(this).offset().top;   
            if ($window.scrollTop() < pos) {
                $('html, body').animate({
                    scrollTop: pos
                }, 1000);
                return false;
            }
        });
    });

    $('.previous').click(function(){
        $($('section').get().reverse()).each(function() {
            var pos = $(this).offset().top;   
            if ($window.scrollTop() > pos) {
                $('html, body').animate({
                    scrollTop: pos
                }, 1000);
                return false;
            }
        });
    });
});

工作示例:JSFiddle