Question

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

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

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

$(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

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变量，以便滚动条结束，它不应该计数。

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

});

编辑：哦，这里仍有bug，如果你按下并且你的第一个它会出错，只要放一个检查器，如果上一个或下一个存在。使用.length（）;

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

3 个答案: