Tumblr-like back-to-top Using jQuery.scrollTop()

by raymondralibi on Apr 07, 2011 | 0 Comment
tumblr like feature

Have you ever seen back-to-top button on tumblr dashboard? Try scrolling the page. Back-to-top button will appear on top-right of the page after the scroll has reached about 1000px from top.

See the demo

In this article I’m going to show you how to do it. First of all download the latest jquery and include it in your page.

Create link to top of page or just link to ‘#’

<a id="back_to_top" title="Back to top" href="#">
  <img src="your-back-to-top-image.png" alt="Back to Top" />
</a>

Give back-to-top link some style

#back-to-top{
  display: block;
  position: fixed;
  right: 20px;
  top: 20px;
  opacity: 0;
}

Put this script into your javascript file

jQuery(document).ready(function(){
 
  jQuery(window).scroll(function(){
 
    // if you want to measure 1000px from the top, use --&gt; if(jQuery(window).scrollTop() &gt; 1000)
    // if you want to measure 1000px from the bottom, use  --&gt; if(jQuery(document).height() - jQuery(window).height() - jQuery(window).scrollTop() &lt; 1000)
    // check whether the scroll has reached 1000px from the top
    if(jQuery(window).scrollTop() &gt; 1000){
      // show back to top
      jQuery('#back-to-top').stop().animate({opacity: 1});
    }
    else{
      // hide back to top
      jQuery('#back-to-top').stop().animate({opacity: 0});
    }
  });
 
});

That’s all, enjoy your back-to-top link. See the demo

Back to top