How to scroll to row in table which is using overflow for scrollbars?

I have a table which needs to be scrollable within a single page. I've used a jQuery scrollable table plugin to accomplish this but now I need to figure out how to scroll to a specific row.

I've tried a few different methods including:

$.scrollTo($('#rowIWantToScrollTo'));

and

var rowpos = $('#rowIWantToScrollTo').position();

$('#myTable').scrollTop(rowpos.top);

and

$('#rowIWantToScrollTo').scrollIntoView();

And nothing has worked so far.

html

2012-04-04 19:19
by Shane Courtrille

What jQuery scrollable table plugin did you use? Perhaps, it has the functionality you are looking for - neo108 2012-04-05 01:47

The one called jquery scrollable table plugin and it doesn't contain the functionality. Is there one you know of that does - Shane Courtrille 2012-04-05 02:01

No I don't. Just trying to see if I can be of any help. Is it this one that you are using? - neo108 2012-04-05 02:10

Yup.. that's the one I'm using - Shane Courtrille 2012-04-05 02:13

LIVE DEMO

Here's how to do it. (You were close).

1) Fetch top offset of element using offset() and .top

2) Scroll to element using ScrollTo

I broke it up a bit for illustration purposes.

Javascript:

$("a").click(function(e){

  var _offset = $(".row9").offset();
  var _topoffset = _offset.top;

  $(".scrollbox").scrollTop(_topoffset);

  e.preventDefault();
});

2012-04-04 19:35
by Jarrett Barnett

Doesn't work nor does the example you linked to work in Chrome or IE8 - Shane Courtrille 2012-04-04 19:46

It actually does work. It appears jsfiddle reset it to use "MooTools" and not "jQuery". I've updated it to jQuery and you can check the updated demo to confirm: http://jsfiddle.net/8AYvW/2 - Jarrett Barnett 2012-04-05 15:43

Weird. I had changed it back to jQuery and it still didn't work but your updated demo works great.. thanks - Shane Courtrille 2012-04-05 16:27

Yes, you are right @ShaneCourtrille. From what I can see, there is no functionality inbuilt in the plugin to scroll to a particular row.

Below is a very simple solution using hyperlinks. Not sure if this is what you want, but it does the job...

Create an internal anchor like this...

<tr>
    <td><a name="toHere"></a>FL</td>
    <td>$1,364.27</td>
    <td>$712.05</td>
    <td>$211.11</td>
    <td>$416.87</td>
    <td>$1,364.27</td>
    <td>$712.05</td>
    <td>$211.11</td>
    <td>$416.87</td>
</tr>

and link it outside the table - <a href="#toHere">Scroll to my specified row</a>

I just did a brief search and there are other plugins out there. One is DataTables.

There are few more plugins listed in the following link that might be of help to you...

https://stackoverflow.com/questions/159025/jquery-grid-recommendations

2012-04-05 02:53
by neo108