滚动到带有固定按钮的部分（可以向上或向下滚动）。

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;
}

我还有两个按钮，它们固定在页面底部。

现在我想要编写一个脚本来滚动到各个部分。如果有人在某个位置刷新网页，例如第二部分将位于页面顶部，如何确定当前哪个部分最接近页面顶部？ 这里是演示链接。

- repincln

Answer 1

以下示例使用页面的当前滚动位置来确定需要滚动到哪个部分元素，而不是使用显式变量。如果用户手动滚动到不同的部分，然后按nav按钮，显式变量将失去同步。请看以下内容:

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

$(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;
            }
        });
    });
});

Working example: JSFiddle

- Chris Pickford

---

谢谢。这正是我想要的。 - repincln

Answer 2

您可以为每个部分添加ID，然后像这样滚动到它们：

var elem = 0;
$('.next').click(function(){
    ++elem;
    if(elem < 0) elem = 1;
     $('html, body').animate({
        scrollTop: $("section[id=sec"+elem+"]").offset().top
    }, 2000);  
});

$('.previous').click(function(){
     --elem;
    if(elem < 0) elem = 1;
     $('html, body').animate({
        scrollTop: $("section[id=sec"+elem+"]").offset().top
    }, 2000);  
});

JSFiddle

此外，您应该限制 elem 变量，以便在滚动结束时它不会继续计数。

注：本文涉及 IT 技术相关内容。

- AxelPAL

Answer 3

这是我的版本，

他们的答案是正确的，但如果他们刷新页面，它就不知道哪一个是当前活动的。

我没有完全测试过这个，也不知道加载后是否需要再次滚动，因为jsfiddle无法手动刷新。

JSFIDDLE

if(window.location.hash !=""){

  var scrollIdPrev = "#"+$(""+ window.location.hash +"").prev(".slide").attr("id")+"";
  var scrollIdNext = "#"+$(""+ window.location.hash +"").next(".slide").attr("id")+"";

 $('html, body').animate({
        scrollTop: $(""+window.location.hash+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".previous").attr("data-target",scrollIdPrev);
        $(".next").attr("data-target",scrollIdNext);
    });

}

$('.next').click(function(){

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").next(".slide").attr("id")+"";


    $('html, body').animate({
        scrollTop: $(""+scrollId+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".previous").attr("data-target",scrollId);
        $(".next").attr("data-target",window.location.hash);
    });

});

$('.previous').click(function(){

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").prev(".slide").attr("id")+"";

    $('html, body').animate({
        scrollTop: $(""+scrollId+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".next").attr("data-target",scrollId);
        $(".previous").attr("data-target",window.location.hash);
    });

});

编辑：哦，这里仍然有错误，如果你按上键而且在第一个位置，它会出现一个错误，请加入一个检查器，如果 prev 或 next 存在，就使用 .length() 函数。

- Andrew James Ramirez