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

Question

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.

What jQuery scrollable table plugin did you use? Perhaps, it has the functionality you are looking for. — neo108
– neo108, Commented Apr 5, 2012 at 1: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
– Shane Courtrille, Commented Apr 5, 2012 at 2: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
– neo108, Commented Apr 5, 2012 at 2:10

Jarrett Barnett · Accepted Answer · 2012-04-05 15:44:29Z

1

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();
});

edited Apr 5, 2012 at 15:44

answered Apr 4, 2012 at 19:35

Jarrett Barnett

8135 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shane Courtrille Over a year ago

Doesn't work nor does the example you linked to work in Chrome or IE8.

Jarrett Barnett Over a year ago

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: jsfiddle.net/8AYvW/2

Shane Courtrille Over a year ago

Weird. I had changed it back to jQuery and it still didn't work but your updated demo works great.. thanks!

Community · Accepted Answer · 2017-05-23 10:08:46Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related