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

Question

我有一个滚动功能，当用户滚动到160像素时，显示'滚动到顶部'元素，点击此元素页面滚动到页面顶部。

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

例如，当用户滚动到400像素时，单击“下一个”时出现的元素向下滚动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); 

，其中第一个参数是你想要受到影响的class或id，其次是元素在特定高度（从顶部）的位置，第三是限制（你想向上滚动的位置），最后一个是的持续时间功能。

---

编辑：您可能还喜欢停在特定的像素，不仅滚动到顶部，所以我改变设置scrollTop的位置在你的欲望的功能。