Smoothly Scroll to an Element Without a jQuery Plugin

January 22, 2010

After spending some time looking for a plugin to do this, I was amazed to see how easy it was to get a smooth scrolling effect using one line of jQuery.  You can use this inside of any callback function.  It works especially well with click.

$('html, body').animate({
	scrollTop: $("#elementID").offset().top
}, 2000);

Although LocalScroll is good for more advanced applications, this snippet is useful for one-time use applications.  Simply adjust #elementID and 2000 to set the element and duration, respectively.

Discussion

This discussion is now closed. If you want to leave feedback, you’re welcome to do so on Twitter.

  1. Awesome little snippet. Wrapping my own scrollTo() function around this. Works perfectly!

    March 3rd, 2012Foad
  2. Thank you. That was the simple example I was needing.

    March 19th, 2012Greg
  3. Butter! Why does everyone look for plugins first?

    April 3rd, 2012ben
  4. This reduced my work by a truck-load! Thank you so much!!

    July 5th, 2012samyukta sherugar
  5. Thanks a lot, spot on. Does anybody know of any browser-compatibility issues with this?

    July 31st, 2012Daniel McNulty
  6. Great snippet. What about if the user tries to scroll up while the animation is taking place? How could you stop the animation during that event?

    August 3rd, 2012James Aitchison
  7. This was a great help. Thanks for posting!

    August 28th, 2012justin
  8. Excellent. Thanks for the code. Appreciate it.

    September 25th, 2012Ron
  9. Excellent snippet, thanks!

    November 6th, 2012Horacio
  10. Perfect! Thanks a lot!!!

    November 16th, 2012Eduardo
  11. Thanks, appreciated!

    December 4th, 2012Mike
  12. Thank you!

    December 17th, 2012Johan Nordström
  13. This was extremely helpful and simple! Thanks!

    January 7th, 2013Abdullah
  14. Excellent idea, thanks!

    February 13th, 2013whitesun
  15. Awesome – thanks! I’m actually confused as to why there’s plugins out there containing 100′s of lines of code when this can produce it in one!

    February 13th, 2013Liam McArthur
  16. Thank you so much, fantastic bit of code!

    February 22nd, 2013TheNibbler
  17. This is what I wanted.

    March 7th, 2013wrappercode
  18. Awesome. 100 times better than what folks at stackoverflow keep fighting about. Thank you. This is perfect.

    May 15th, 2013Micks
  19. People sometimes get involved in uselessly complicated stuff. This is a brilliant example of how you can rid of it and make it simple. Thanks!

    May 21st, 2013chris
  20. Thanks heaps for this, it’s a great solution, very simple and reliable.

    May 29th, 2013Alex
  21. Awesome. I appreciate the information. This will definitely save many a kilobyte of storage. Any words on browser compatibility?

    June 12th, 2013ibrahim lawal
  22. There are currently no known issues in recent jQuery versions.

    June 12th, 2013Cory LaViska
  23. What about scrolling back to the top, will this work?

    June 12th, 2013Stan
  24. Just change $("#elementID").offset().top to 0.

    June 12th, 2013Cory LaViska
  25. Thanks, mate ;)

    June 17th, 2013Albert
  26. Awesome, thanks! :)

    June 19th, 2013Mani Sheriar
  27. Thanks. A complete example to scroll to the top:

    $('.top').click(function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        });
    });
    July 3rd, 2013Ahmad Ajmi
  28. Here’s a small addition if you want to center the element in the window. Just set the scrolltop to:

    $('#elementID').offset().top + $('#elementID').height()/2 - $(window).height()/2
    
    July 17th, 2013Andreas
  29. Fantastic, thanks a lot for sharing!

    July 17th, 2013Daniel Wentsch
  30. This is simple and useful to use and really works well. Thank you!

    August 9th, 2013nagaraju
  31. Beautiful, thanks. I needed to tweak it a little to get it to work on an absolute positioned overlay.

    September 7th, 2013Kelly Dyson
  32. $(‘html, body’) shouldn’t it be $(‘html body’)? Because when finished function callback gets called twice.

    September 20th, 2013Kanwar
  33. Awesome! Thanks!

    November 1st, 2013Vince