A simple "Scroll to Top" Script

Jan 14, 2013

Somebody asked me about the “Back To Top” icon that appears in the lower right corner if you scroll down a page on this website. Clicking on the icon will scroll the window back to the top, a handy feature if you have long pages. 

Here is the code:

HTML

First we add the scroll icon image in the page footer. This is a Drupal site, the php just provides the path to my theme folder so the image is fetched correctly. You can also just place the image URL into the source attribute of the image.

CSS

Now we position the icon at the lower right corner of the browser window. Then we add a hover behavior by varying the opacity of the icon. Of course that will not work for IE8, it will always show the icon at full opacity.

#toTop { display: block; position: fixed; bottom: 20px; right: 20px; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; opacity: 0.5; cursor: pointer; } #toTop:hover { opacity: 1; } 

Javascript

The comments in the script tell the story. Here is what we do:

  • Check if a ‘#toTop’ image is present in the DOM
  • Attach a click event handler to the ‘#toTop’ image. Whenever the image is clicked the browser window will scroll back to the top
  • Hide the ‘#toTop’ image if we are at the top of the browser window. You might expect to use the scrollTo() method of the window object. It is supported by all modern browsers, except that IE8 returns always 0. Turns out that the behavior is different between various browsers. I found the following return values for scrollTop():
      $(window).scrollTop() $('html').scrollTop()
    FF value value
    WK value 0
    IE8 0 value
    IE9+ value value
  • Whenever we detect scrolling we show the ‘#toTop’ image.
  • Whenever we detect that the window is resized we update the ‘#toTop’ image.
  • Note: Scrolling to the top uses the easing plugin by George McGinley Smith. Download is available at: http://gsgd.co.uk/sandbox/jquery/easing/

if($('#toTop').length) { // click function for the scroll to top icon $('#toTop').click( function () { $('window, html').animate({scrollTop:0}, 500, 'easeOutCubic'); }); // hide scroll icon if content is at top already if ($(window).scrollTop() === 0 && $('html').scrollTop() === 0) { $('#toTop').hide(); } // update scroll icon if window is resized $(window).resize(function () { if ($(window).scrollTop() === 0 && $('html').scrollTop() === 0) { $('#toTop').hide(); } }); // update scroll icon when scrolling $(window).scroll(function () { if ($(window).scrollTop() === 0 && $('html').scrollTop() === 0) { $('#toTop').fadeOut(400); } else { $('#toTop').fadeIn(400); } }); }

Comments

Hi, Thank you for the code but when apply all the code here the scroll button displays even at the top of the page. And also when I click the button it jumps to the top of the page instead of a softer scroll to top. The button on your page seems to work. Is there anything that needs to be changed. thnx.

Add new comment