4

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

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 部分将位于页面顶部？如何确定当前最靠近页面顶部的部分？

这是小提琴。

4

3 回答 3

3

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

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

于 2013-10-18T08:56:31.183 回答
2

这是我的版本，

答案是正确的，但如果他们刷新页面，它不会知道哪个当前处于活动状态。

我没有完全测试这个，我不知道加载后是否需要再次滚动，因为 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);
    });

});

编辑：哦，这里仍然有错误，如果你按下并且你的第一个它会有一个错误，如果上一个或下一个存在，只需放置一个检查器。通过使用 .length();

于 2013-10-18T09:25:16.343 回答
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 变量，以便您的滚动条结束它不应该计数。

于 2013-10-18T08:33:53.120 回答