Code: Select all
<html lang="en">
<head>
<meta charset="utf-8">
<title>scrollTop demo</title>
<style>
table.demo {
display: table;
}
table.demo thead, table.demo tbody {
float: left;
width: 100%;
}
table.demo tbody {
overflow: auto;
height: 200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#scroll").click(function(){
var index = 15;
var ht = 22;
var offset = ht*(index-1);
$('#table1 > tbody').scrollTop(offset);
});
function jsfunction() { $('#table1 > tbody').scrollTop(6); } ;
});
</script>
</head>
<body>
<div align="center"><button id="scroll">Scroll</button>
<table id="table1" class="demo" width="200" border="1">
<thead><tr><td>Column Heading</td></tr></thead>
<tbody><tr><td>line 1</td></tr><tr><td>line 2</td></tr><tr><td>line 3</td></tr><tr><td>line 4</td></tr><tr><td>line 5</td></tr>
<tr><td>line 6</td></tr><tr><td>line 7</td></tr><tr><td>line 8</td></tr><tr><td>line 9</td></tr><tr><td>line 10</td></tr>
<tr><td>line 11</td></tr><tr><td>line 12</td></tr><tr><td>line 13</td></tr><tr><td>line 14</td></tr><tr><td>line 15</td></tr>
<tr><td>line 16</td></tr><tr><td>line 17</td></tr><tr><td>line 18</td></tr><tr><td>line 19</td></tr><tr><td>line 20</td></tr>
<tr><td>line 21</td></tr><tr><td>line 22</td></tr><tr><td>line 23</td></tr><tr><td>line 24</td></tr><tr><td>line 25</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Am I missing something? I’m using the latest version of TopStyle (5.0.0.104) with Windows 8.1 64 bit.