Scroll up and down div from input buttons in JavaScript

If you want to scroll up and down the div element through the buttons you can use the following code sample.

The example contains a div element and two input buttons for up and down scroll. In this example the div element contain an image. You can get an idea from the below image.

Scroll up and down div from buttons

The example uses the scrollTop property of the div element to set the scroll position. The scrollUP function is for scrolling up direction and scrollDown function for scrolling down direction.
Both functions evaluates an expression to set the scroll position at specified intervals using the window.setInterval() JavaScript method that will start on the button onmousedown event. And the onmouseup event we will be able to stop the execution by calling the clearInterval() method.

 var scrollHandler;
        function btnup_mousedown() {
            scrollHandler = window.setInterval(scrollUP, 100);
        }
 
        function btndown_mousedown() {
            scrollHandler = window.setInterval(scrollDown, 100);
        }
 
        function scrollUP() {
            var position = document.getElementById('divimg').scrollTop;
            document.getElementById('divimg').scrollTop = position - 50;
        }
 
        function scrollDown() {
            var position = document.getElementById('divimg').scrollTop;
            document.getElementById('divimg').scrollTop = position + 50;
        }
 
        function onmouseup() {
            window.clearInterval(scrollHandler);
        }

See the full example:

<!DOCTYPE html>
<html>
<head>
    <title>Scroll Up and Down from buttons </title>
    <script type="text/javascript">
        var scrollHandler;
        function btnup_mousedown() {
            scrollHandler = window.setInterval(scrollUP, 100);
        }
 
        function btndown_mousedown() {
            scrollHandler = window.setInterval(scrollDown, 100);
        }
 
        function scrollUP() {
            var position = document.getElementById('divimg').scrollTop;
            document.getElementById('divimg').scrollTop = position - 50;
        }
 
        function scrollDown() {
            var position = document.getElementById('divimg').scrollTop;
            document.getElementById('divimg').scrollTop = position + 50;
        }
 
        function onmouseup() {
            window.clearInterval(scrollHandler);
        }
    </script>
 
</head>
<body>
    <div style="width: 400px">
        <div id="divimg" style="height: 568px; overflow: auto;
                                float: left; width: 80%;">
            <img class="page-image" src="9.png">
        </div>
        <div id="divbuttons" tyle="height: 568px;float: left;width: 80%;">
            <input id="btnup" type="button" value="Up" 
                    onmousedown="btnup_mousedown();" onmouseup="onmouseup();" />
            <input id="btndown" type="button" value="down" 
                   onmousedown="btndown_mousedown();" onmouseup="onmouseup();" />
        </div>
    </div>
</body>
</html>

Read about the setInterval method:

The setInterval() method executes a specified functionin in given time-interval. You can use this method like as:
window.setInterval("your_specified_function", time_milliseconds);

The window.setInterval() method can be written without the window prefix.

your_specified_function is a function that you want to execute.
time_milliseconds is the length of the time-intervals in milliseconds between each execution.

One thought on “Scroll up and down div from input buttons in JavaScript”