Jquery animate back to top will provide an easy way to the user to scroll or animate back to top.
Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your own.
<a id="back-to-top" style="display: block;" href="#top">Back to top</a>
With jquery it is just a couple code that helps to make it work in all browsers. My first code checks that, if the scroll position from the top is greater than 100 then the #back-to-top is fade in(show) else its fadeout(hide). After that I have to write one more function to work on click event of the #back-to-top.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" ></script> <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-to-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script>