Question

我有一个滚动功能，可以显示滚动到顶部＆＃39;当用户滚动到160像素时，当单击此元素时，页面会滚动到页面顶部。

我想使用该功能创建更多滚动按钮，这些按钮将在文档的不同阶段显示，并滚动到不同的区域。

例如，当用户向下滚动到400像素的元素＆＃34; next＆＃34;单击它时出现页面向下滚动300px，它们从顶部到达900px会出现一个新的滚动元素，当单击时会向下滚动到1300px，依此类推。

这是我的jQuery代码：

   $(document).ready(function(){

$(window).scroll(function(){
    if ($(this).scrollTop() > 160)  {
        $('.scrollToTop').fadeIn();
    } else {
        $('.scrollToTop').fadeOut();
    }

});

$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});
});

HTML：

<div class="scrollToTop-container">
<a href="#" class="scrollToTop"><img src="img/icon_arrow_up.png" width="24" height="24" />      <br/>Scroll to top</a>
</div>

我希望这不会太混乱。

由于

Answer 1

也许你可以使用这样的函数重复使用代码的某些部分：

function scroll(id,show,limit,timeout){
  $(window).scroll(function(){
    if ($(this).scrollTop() > show)  {
      $(id).fadeIn();
    } else {
      $(id).fadeOut();
    }
 });
 $(id).click(function(){
   $('html, body').animate({scrollTop : limit},timeout);
   return false;
 });
}

然后像这样使用它：

scroll(".scrollToTop",160,0,800);

其中第一个参数是您想要受影响的类或ID，第二个是元素在某个高度（从顶部）的位置，第三个是限制（您要向上滚动的位置），最后一个是持续时间animate功能。

编辑：您可能还想停留在特定的px上，不仅滚动到顶部，所以我更改了函数以根据需要设置scrollTop位置。

如何为多个元素使用相同的jQuery滚动功能

1 个答案: