How to scroll to specific item using jQuery?

Question

I have a big table with vertical scroll bar. I would like to scroll to a specific line in this table using jQuery/JavaScript. Are there built-in methods to do this? Here is a little example to play with. ``` div { width: 100px; height: 70px; border: 1px solid blue; overflow: auto; } ``` ```

1
2
3
4
5
6
7
8
9

```

Accepted Answer

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`.

How to scroll to specific item using jQuery?

Solution

Problem

Related problems