Issue On Scrolling to A Row in Table

Question

Can you please take a look at this DEMO and let me know how I can use jquery to scroll to the selected row or animate that row to the middle of the scrolled div sc?

Here is the code:

<div id="sc">
    <table id="mytable"></table>
</div>
<button class="25">Scrool to 25</button>
<button class="75">Scrool to 75</button>
<button class="125">Scrool to 125</button>
<button class="199">Scrool to 199</button>
<button class="0">Scrool to 0</button>
<script>
$(document).ready(function () {
    for (var i = 0; i < 200; i++) {
     $('#mytable').append('<tr class=' + i + '><td>This is Row' + i + ' </td></tr>');
     $("#125").click(function() {
     $('#sc').animate({
    scrollTop: $("#sc").offset().top}, 2000);
 });
      }
});
<script>

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Mateusz Nowak, Jan 05 '14 at 08:40
Hi estshy I already tried this $("#125").click(function() { $('#sc').animate({ scrollTop: $("#sc").offset().top }, 2000); }); but nothing happend! — user3162145, Jan 05 '14 at 08:45
You may use instead plugin animatescroll (http://plugins.compzets.com/animatescroll/). It's simple and give better effect. — Mateusz Nowak, Jan 05 '14 at 08:53

score 1 · Answer 1 · answered Jan 05 '14 at 08:44

1

You may also used named anchors <a name="row10">...</a> and in your anchor tag just refer to the #tag like:

<a href="#row10">...</a>

Simplistic approach, should work for you unless you want some fancy animation and other stuff.

answered Jan 05 '14 at 08:44

Vivek Jain

3,703
6
26
45

Issue On Scrolling to A Row in Table

1 Answers1