How to scroll to a part of the page using jQuery?

Question

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

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

How can it be modified to take the user to the part of the page where there is a h3 tag with the id "myTitle":

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

Answer 1

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

Answer 2

This is a brilliant example

That even works with JS turned off. Additionally this adds the #myTitle to the URL allowing bookmarking.

Answer 3

You can get the offset of the element from the top:

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

You can then use that as the value to scroll to.

Answer 4

How about:

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

using .offset().

Here's a working example: http://jsfiddle.net/naTjL/