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.

22 comments on “Scroll to any element using jQuery

  1. cristopher ca on said:

    where can i download this script?

  2. Safeer Ahmed on said:

    Very nice . I like this scroll to top.

  3. Marek on said:

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

  4. just what i needed, danke!

  5. rama ila on said:

    does not work in IE 9

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

  7. Gordo on said:

    awesome
    thanks

  8. eddie on said:

    Gracias!

  9. hammad on said:

    Great work keep it up

  10. arlon on said:

    awesome script! Thank you!

  11. Soup on said:

    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. Greg on said:

    Worked flawlessly. Thank you :)

  13. Dave Earl on said:

    Great light weight implementation. Thank you.

  14. shawn on said:

    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. Giovanni on said:

    Great script! You should include easing options too :)

  16. Paula Fleck on 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. Luciano on said:

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

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

  20. Ahmet Eyüp on said:

    Nice work, thank you :)

  21. Reuben on 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 on 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. :)

Leave a Reply

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

*

44,440 Spam Comments Blocked so far by Spam Free Wordpress

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>