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

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

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.

来源

2013-10-18 repincln

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

$(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-18 08:56:31

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

您可以添加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-18 08:33:53 AxelPAL

答案也不错，但我需要没有ID的解决方案。 – repincln

这里是我的版本，

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

虽然我没有完全测试，但我不知道是否需要在加载后再次滚动，因为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-18 09:25:16

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

回答

相关问题