132

Im tring to animate the scroll to a particular ID on page load. I have done lots of research and came across this:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

but this seems to start from the ID and animate to the top of the page?

The HTML (which is half way down the page) is simply:

<h2 id="title1">Title here</h2>
Nakilon
  • 34,866
  • 14
  • 107
  • 142
Adi
  • 4,034
  • 13
  • 56
  • 78
  • 1
    This isn't much of an answer, but I highly recommend Ariel Flesler's "scrollTo" plugin; it has a lot of features for panning about a page, and a few extensions to the plugin for common cases (for instance, you might find his "LocalScroll" plugin useful for scrolling to a link's href if it's on the same page). You can get the plugin here: http://flesler.blogspot.com/2007/10/jqueryscrollto.html – Faisal Jul 13 '11 at 16:48

6 Answers6

342

You are only scrolling the height of your element. offset() returns the coordinates of an element relative to the document, and top param will give you the element's distance in pixels along the y-axis:

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

And you can also add a delay to it:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
Community
  • 1
  • 1
BumbleB2na
  • 10,723
  • 6
  • 28
  • 30
  • 1
    What is it about automatic scrolling that makes me go "WOW COOL!!"? Maybe it's the simplicity of your solution. – theblang Apr 02 '13 at 15:51
  • I needed to scroll an element into view on page load, but had two issues: a) using "html,body" gave two callbacks (one for each matched element). b) It depends on browser which of body or html works. So I made a gist which you can adapt to use in your project to ensure scroll-into-view works on "any" browser and that you will only get one callback when animation ends. https://gist.github.com/netsi1964/4ddffe1ae14e05220d25 – Netsi1964 Aug 29 '14 at 12:26
  • 2
    This isn't really correct. You really should consider the current scroll position of body or element that we are trying to `scroll`. With that in mind you would add the current scroll position of the `body` to the `offset().top` position of the element we want in view, The resulting sum is the value we want to scroll to.`$('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);` – mattdevio Oct 17 '17 at 00:33
  • @magreenberg have you tried this out? If current scroll position is anything above value 0 then what you're suggesting might not work. Let's say that scrollable container is 1000 pixels tall and the current scroll position is at 1000. Let's say the element you're scrolling to sits in the vertical center at 500. I think that what you're suggesting would tell it to scroll to 1500, right? – BumbleB2na Oct 19 '17 at 10:50
  • @BumbleB2na `.offset().top` would give you a negative number in this instance. And this really only works for `body` and `html` since `offset().top` is going to give you the document top offset, not the intended scrolling parent. – mattdevio Oct 20 '17 at 08:21
  • @magreenberg Thank you, you saved me so much grief. I had a div that is not 100% height with `overflow-y: scroll` set. This works perfect as long as you also subtract the distance between the top of the page and the div. – element11 Mar 05 '18 at 02:06
  • And if you set `html { scroll-behavior: smooth; }` style, you should give 0 to duration: `$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 0); ` – Orman Faghihi Mohaddes May 04 '21 at 14:57
23

Pure javascript solution with scrollIntoView() function:

el = document.getElementById('title1')
el.scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>

P.S. 'smooth' parameter now works from Chrome 61 as julien_c mentioned in the comments.

Ahmad
  • 8,811
  • 11
  • 76
  • 141
Vladimir Vovk
  • 688
  • 8
  • 9
5

Deprecation Notice: The jQuery.browser property was removed in jQuery 1.9. Visit the docs for more details: https://api.jquery.com/jQuery.browser/

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

Source: jQuery Animate Body Scroll For All Browsers

kjones
  • 1,339
  • 1
  • 13
  • 28
AleX gRey
  • 51
  • 1
  • 1
3

There is a jquery plugin for this. It scrolls document to a specific element, so that it would be perfectly in the middle of viewport. It also supports animation easings so that the scroll effect would look super smooth. Check this link.

In your case the code is

$("#title1").animatedScroll({easing: "easeOutExpo"});
Eugene Tiurin
  • 4,019
  • 4
  • 33
  • 32
  • "It also supports animation easings so that the scroll effect would look super smooth" Unfortunately, that does not hold true. If the computer is slow for some reason it just keeps jumping without actually moving properly. – brunoais Apr 26 '14 at 09:21
  • Smooth scrolling requires a lot pixels to be calculated. Sure a slow "computer" (more GPU) cannot do this but due to lacking enough ALUs. So generally he is right. And really easy scrolling lib. – Roland Nov 14 '17 at 10:50
1

try with following code. make elements with class name page-scroll and keep id name to href of corresponding links

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
Akhil
  • 443
  • 1
  • 9
  • 29
-3

for simple Scroll, use following style

height: 200px; overflow: scroll;

and use this style class which div or section you want to show scroll

m.m
  • 1
  • 2