Friday, 8 June 2012

JavaScript: smooth scroll to the top of the page

   


If you have long pages, it is quite clear that a user will scroll your pages and eventually reach the end of the content area. In some case, however, menus or other relevant elements of the web site will stay at the top of the viewport. How do we create a link which will scroll smoothly back at the top?
We can use a small JavaScript function. Here I explain how...

The function
We are going to insert the following JavaScript function in the head of the document. The link at the bottom of the page will trigger it and immediately the page will scroll up to the beginning.
We are going to benefit from the scrollBy method.
Here's the function:
<script type="text/javascript">
var timeOut;
function scrollToTop() {
  if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
    window.scrollBy(0,-50);
    timeOut=setTimeout('scrollToTop()',10);
  }
  else clearTimeout(timeOut);
}
</script>
As you can see we are using the setTimeout to slow down the scrolling and re-trigger the function until we reach the top of the page.

The HTML
There's not much to say about the HTML part: it is just a link but eventually you can style it appropriately. Just a small side note: because the link has a href="#" it will work even if JavaScript is disabled on the target browser.
<a href="#" onclick="scrollToTop();return false">back to the top of page</a>
And that is all for today.

27 comments:

  1. Hi Marco,

    Nice script. Thanks

    ReplyDelete
  2. The script was very useful for me. Thank you.

    --Arun

    ReplyDelete
  3. Exactly what I needed, so thank you very much !
    It is not that easy to find a vanilla js script like this.

    ReplyDelete
    Replies
    1. Thanks. Keep on following the web thought.

      Delete
  4. Is there any way to set the height in which it scroll up to? I want to set it to scroll to a certain point on my page.. Please help me!!

    ReplyDelete
    Replies
    1. Simply put:
      "javascript:scroll(0,0)"
      First 0 is the x pos, the second the y. It's in pixels. Work on it... I've never tried it.

      Delete
  5. love the script, thanks! One question, how would I go about adding easing?

    ReplyDelete
    Replies
    1. I don't think you can, to my knowledge. Anyone can help?

      Delete
  6. Thanks a lot, very easy to understand and straight forward method

    Have a nice Day.

    Nuzrath N++ Studios...

    ReplyDelete
  7. just simple javascript thanks a lot.

    ReplyDelete
  8. This is EXACTLY what I was looking for. Simple js. I'm still learning js, so the simpler scripts really help me. Thanks!

    ReplyDelete
  9. Cool, thanks a lot!

    ReplyDelete
  10. I use jfunc functions. They have a function that knows how to make it in single line of code. http://jfunc.com/jFunc-functions.aspx

    ReplyDelete
  11. Of course it will work without the URL in plain HTML, because a click on a link causes the page to reload... This code does not help in scrolling anywhere else than to the top.

    ReplyDelete
  12. I found this very helpful and thank you for taking time to help people you don't even know. Great job.

    ReplyDelete
  13. Replies
    1. Wrong. Even if it is easy to make it work, you can figure it out.

      Delete
  14. i have a blog in blogger.com, sorry your script doesn't work. Are there any script that i forget?

    ReplyDelete
  15. Thanks for sharing... works perfectly!!!
    jlmmty1965@gm

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.