About Scroll to the top of the page with jQuery

Today we'll have a look at creating 'Scroll to top' button for you website. I'm going to show you the approach which takes no longer than a minute to complete (ok - couple of minutes). To start with create your button - you can make it as beautiful as you want - I'm simply going to use the link with the id to-top : <a href="#" id="to-top">Back to top</a> Put this button at the bottom of your page - footer is usually a good place for it. Now with our button / link ready let's write some javascript which will create the scrolling effect. Before we write the javascript make sure you've downloaded the latest version of jQuery and included it within your pages. Now create a new file called core.js and also include it in your pages. Within the core.js type the following: $(function() { $('#to-top').click(function() { $('html body').animate({ scrollTop : 0 } 'slow'); return false; }); }) And that's all the magic that creates a scrolling / sliding effect when you click on the Back to top button. What it basically does is it's executing the animate method when the click event has occured. It slides to the top of the body of the page (position 0) with the speed slow - you can amend the speed with milliseconds (100 => 100 milliseconds) to match your expectation. So that's it - hopefully you'll find it useful - and any questions - use the section below.