How to scroll a page using jQuery?

Question

My code scrolls the user at the bottom of the page:

var $elem = $('body'); $('html, body').animate({scrollTop: $elem.height()}, 800); 

How can it be changed to force the user to go to the part of the page where there is an h3 tag with the identifier "myTitle":

 <h3 id="myTitle">Hello</h3> 

Answer 1

What about:

 var $elem = $("#myTitle"); $('html, body').animate({scrollTop: $elem.offset().top}, 800); 

using .offset() .

Here is a working example: http://jsfiddle.net/naTjL/

Answer 2

You can get the offset of the element from above:

var position = $("#myTitle").offset().top;

You can then use this as a value to scroll.

Answer 3

This is a brilliant example.

It even works with JS turned off. In addition, this adds #myTitle to the #myTitle URL.

Answer 4

 $('html, body').scrollTop($("#myTitle").offset().top)