Animate scroll to ID on page load

Question

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    lt h2 id  title1  gt Title here lt  h2 gt

User · Accepted Answer

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);

User · Answer

jQuery browser webkit    body    html   animate   scrollTop      title1   offset   top    1000     jquery-animate-body-for-all-browsers

User · Answer

for simple Scroll  use following style  height  200px          overflow  scroll   and use this style class which div or section you want to show scroll

User · Answer

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

User · Answer

Pure javascript solution with scrollIntoView   function    x000D   x000D  document getElementById  title1   scrollIntoView  block   start   behavior   smooth     x000D   lt h2 id  title1  gt Some title lt  h2 gt  x000D   x000D   x000D    P S   smooth  parameter now works from Chrome 61 as julien c mentioned in the comments

User · Answer

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

[jquery] Animate scroll to ID on page load

Examples related to jquery

Examples related to scroll

Examples related to jquery-animate