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

Question

我有一个滚动功能，当用户滚动到 160 像素时，它会显示“滚动到顶部”元素，当单击此元素时，页面会滚动到页面顶部。

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

例如，当用户向下滚动到 400 像素时，单击该元素时会出现“下一个”元素，页面向下滚动 300 像素，从顶部到达 900 像素时，会出现一个新的滚动元素，单击该元素时会向下滚动到 1300 像素，依此类推。

这是我的 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，第二个参数是元素在特定高度(从顶部开始)的位置，第三个参数是限制(您想要向上滚动的位置)，最后一个参数是元素的持续时间动画函数。

<小时/>

编辑:您可能还想停在特定的像素上，而不仅仅是滚动到顶部，因此我更改了函数以根据您的需要设置scrollTop位置。