Scrolling a Div in JavaScript
Here is a example to scroll div through javascript by clicking a button or linkbutton bellow is 5 linkbutton for scrolling different-different way to a div content Scroll Top,Bottom,Absolute,Up and Down.
Just copy and paste java script code to the page and set function on click of your control for doing some action and pass the id of div to the function.
See Example Here
| Id | EmpName |
|---|---|
| 1 | vivek gupta |
| 2 | ranu gupta |
| 3 | vijay |
| 4 | Ramkesh |
| 5 | Pushkar |
| 6 | Dinash |
| 7 | Anand |
| 8 | Yogesh |
| 9 | Lohitha |
| 10 | Ritu |
| 11 | Ashish |
JavaScript Code
<script type="text/javascript">
function
toTop(id) {
document.getElementById(id).scrollTop =
0
}
defaultStep = 1
step = defaultStep
function
scrollDivDown(id) {
document.getElementById(id).scrollTop
+= step
timerDown = setTimeout("scrollDivDown('" + id + "')", 10)
}
function
scrollDivUp(id) {
document.getElementById(id).scrollTop
-= step
timerUp = setTimeout("scrollDivUp('" + id + "')", 10)
}
function
toBottom(id) {
document.getElementById(id).scrollTop =
document.getElementById(id).scrollHeight
}
function
toPoint(id) {
document.getElementById(id).scrollTop =
100
}
</script>
Html Code
<div style="width:400px">
<input type="button" style="cursor: pointer; color: Blue" onclick="toTop('div1')"
value="Top" />
<input type="button" value="ScrollDown" style="cursor: pointer; color: Blue" onmousedown="scrollDivDown('div1')"
onmouseup="clearTimeout(timerDown)" />
<input type="button" style="cursor: pointer; color: Blue" onmousedown="scrollDivUp('div1')"
value="Scroll Up" onmouseup="clearTimeout(timerUp)" />
<input type="button" style="cursor: pointer; color: Blue" value="Bottom" onclick="toBottom('div1')" />
<input type="button" style="cursor: pointer; color: Blue" value="Point" onclick="toPoint('div1')" />
</div>
<div id="div1" style="overflow: scroll; height: 200px; width:400px;
border-style:
double">
<table align="center" border="1" cellpadding="10px" cellspacing="10px">
<tr>
<th>
Id
</th>
<th>
EmpName
</th>
</tr>
<tr>
<td>
1
</td>
<td>
vivek gupta
</td>
</tr>
<tr>
<td>
2
</td>
<td>
ranu gupta
</td>
</tr>
<tr>
<td>
3
</td>
<td>
vijay
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Ramkesh
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Pushkar
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Dinash
</td>
</tr>
<tr>
<td>
7
</td>
<td>
Anand
</td>
</tr>
<tr>
<td>
8
</td>
<td>
Yogesh
</td>
</tr>
<tr>
<td>
9
</td>
<td>
Lohitha
</td>
</tr>
<tr>
<td>
10
</td>
<td>
Ritu
</td>
</tr>
<tr>
<td>
11
</td>
<td>
Ashish
</td>
</tr>
</table>
</div>
