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>

Recent Article