Scroll to any element using jQuery

12 March 2012, Danny Connell

In today's front-end landscape of responsive, mobile-friendly sites, I'm finding a frequent need to scroll the user (either up or down) to various different elements on the page. This article will show you a simple, lightweight way to do this...

'Back to top' buttons, 'Jump to menu' buttons, 'Jump to widget' links... there are now all sorts of situations where you would want to smoothly scroll the user to a certain element on the page.

There has been a jQuery plugin around for quite a while that can accomplish this, Arial Flesler's ScrollTo.

This is a wonderful plugin that allows you to scroll in all sorts of different ways.

However, if all you want to do is scroll up or down to an element, by using a selector, then you may prefer this lightweight function:

function scrollToElement(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);			
}

Here's how you might use it to scroll to an element with an ID of 'content' when the user clicks a 'Jump to content' button:

$('a.jump-to-content').click(function () {
    scrollToElement('#content');
});

You can also specify the duration of the scroll animation (in miliseconds):

scrollToElement('#content', 500); // scroll the element #content, and take 500ms to get there

And you may also want to specify a vertical offset. The following will scroll the user to 150px above the #content element:

scrollToElement('#content', 500, -150); // scroll to 150px before the element #content, and take 500ms to get there

Show me the god damn demo page already.

23 Comments...

  1. where can i download this script?

  2. Very nice . I like this scroll to top.

  3. Hey!
    Excellent, light, precisely what I needed.
    Big thanks!

  4. just what i needed, danke!

  5. rama ila 22 March 2013 at 9:10pm said:

    does not work in IE 9

  6. THANK YOU! Exactly what I was looking for this evening!

  7. awesome
    thanks

  8. eddie 22 May 2013 at 1:50pm said:

    Gracias!

  9. hammad 10 June 2013 at 6:23pm said:

    Great work keep it up

  10. awesome script! Thank you!

  11. Works nicely, however, how would I get it to do a relative scroll (not from the top)?

    For example, if I click your example to "Scroll to 75px before Content, with animation time of 1000ms" then I want to scroll to "Scroll to Navigation" *without* having to "Scroll to top". Can your code do that? If so, how?

  12. Worked flawlessly. Thank you :)

  13. Dave Earl 6 October 2013 at 12:46am said:

    Great light weight implementation. Thank you.

  14. this is exactly what i was looking for. Im kinda new to this and wondering if you could help me out. Im making a single page website and i want to use both prettyPhoto and scrollto at the same time... its all set, just not the scrollto...

  15. Great script! You should include easing options too :)

  16. Paula Fleck 28 January 2014 at 6:06pm said:

    Hey, great plugin! But my plugin don't scroll with animation. It's just a jump! I tried to put the time of the animation, but still not working. Do you know anything about it?
    Thanks!

  17. Awesome!!! Thank you very much

  18. the time isnt working....i dont know why... im noob.

  19. :-*
    best
    عالی بود
    :)

  20. Ahmet Eyüp 1 March 2014 at 2:38pm said:

    Nice work, thank you :)

  21. Reuben 5 March 2014 at 3:03pm said:

    Worked great, however I wanted to use it after loading content into bootstrap model div so I found a slight adjustment was need:
    function scrollToElement(host, selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    var element = $(selector);
    var offset = element.offset();
    var offsetTop = offset.top + verticalOffset;
    $(host).animate({
    scrollTop: offsetTop
    }, time);
    Magic :-)

  22. Janne Wolterbeek 25 March 2014 at 9:35pm said:

    I found this to be the best solution out there, lightweight and smooth.

    Until I got stuck, and took me a while to figure out the bug:

    THIS messed up the scrollToElement js, when applied to html and body:

    overflow-y: scroll; /* has to be scroll, not auto
    -webkit-overflow-scrolling: touch;

    ---

    Just so everyone knows. :)

  23. Lakshman 22 May 2014 at 12:01pm said:

    Nice and great work .... :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>