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

Question

I have a scrolling function that reveals a 'scroll to top' element when user scrolls to 160 pixels, when clicked this element the page scrolls to the top of the page.

I want to use that function create more scroll buttons which will be revealed at different stages in the document and that scroll to different areas.

For example when the user scrolls to 400 pixels down the element "next" appears when clicking it page scrolls 300px down, they get to 900px from top a new scroll element appears which when clicked scrolls down to 1300px, and so on.

here is the jQuery code i have:

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

i hope thats not too confusing.

Thanks

Answer 1

Maybe you can use a function like this I made reusing some parts of your code:

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;
 });
}

And then use it like this:

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

where first parameter is class or id you want to be affected, second is the position of the element at certain height (from top), third is limit (where you want to scroll up) and last one is the duration of the animate function.

---

EDIT: You may also like to stop on specific px, not only scroll to top, so I changed the function to set the scrollTop position at your desire.