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

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

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 部分位于页面顶部，该怎么办？如何确定当前哪个部分最接近页面顶部？

这是小提琴。 http://jsfiddle.net/dJPmA/

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

$(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 http://jsfiddle.net/chrispickford/dJPmA/4/