How to scroll to specific item using jQuery? How to scroll to specific item using jQuery? javascript javascript

How to scroll to specific item using jQuery?


Dead simple. No plugins needed.

var $container = $('div'),    $scrollTo = $('#row_8');$container.scrollTop(    $scrollTo.offset().top - $container.offset().top + $container.scrollTop());// Or you can animate the scrolling:$container.animate({    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()});​

Here is a working example.

Documentation for scrollTop.


I realise this doesn't answer scrolling in a container but people are finding it useful so:

$('html,body').animate({scrollTop: some_element.offset().top});

We select both html and body because the document scroller could be on either and it is hard to determine which. For modern browsers you can get away with $(document.body).

Or, to go to the top of the page:

$('html,body').animate({scrollTop: 0});

Or without animation:

$(window).scrollTop(some_element.offset().top);

OR...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)


I agree with Kevin and others, using a plugin for this is pointless.

window.scrollTo(0, $("#element").offset().top);