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	Abhay Singh
2	Sonu gupta
3	Kanishka
4	Bhawna Joshi
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>

Reactions: