Using Javascript to scroll up and down the webpage

problem

You wish to perform a dynamic scroll of the webpage vertically or horizontally. In this post we will see how to perform a scroll using Javascript.

SOLUTION

In Javascript, we have the scroll() method provided by the window object. Let’s see an example, but first let’s create a webpage that has some sample data – lorem ipsum text so it’s scrollable vertically.

scrollby.html

				
					<html DOCTYPE!>

    <body>
        <p>
        Interdum malesuada taciti bibendum praesent auctor facilisi rutrum non felis natoque phasellus. Adipiscing dapibus nec sem. Sagittis aptent magnis tristique erat lorem eget. Lectus mauris lacinia bibendum donec. Rhoncus ullamcorper vulputate felis aliquet neque, ultrices bibendum. Phasellus quis rutrum penatibus commodo non pharetra posuere potenti id! Primis hendrerit cursus aptent. Elementum parturient metus purus pulvinar enim sed cum class. Leo placerat fermentum vel aliquet tortor cursus ipsum. Egestas phasellus mus elementum felis! Metus rutrum, quam proin molestie ipsum. Magnis.
        </p>
        <p>
        Nibh sed ridiculus fermentum aenean tortor auctor facilisi magnis mi auctor. Litora urna rhoncus facilisi posuere rutrum ac sodales pellentesque ridiculus eros adipiscing fermentum. Nascetur cubilia porta ut enim, convallis urna rhoncus fermentum. Habitasse cras ullamcorper amet. Metus conubia at scelerisque cum mattis! Gravida euismod id vulputate dapibus porttitor pretium. Pellentesque tortor vulputate mus ornare mus habitasse. Cubilia fringilla proin lobortis ultrices torquent platea feugiat montes curabitur. Duis sociosqu parturient non primis magna per nibh morbi. Metus est odio posuere ut massa. Euismod tristique risus ad magna curae;! Felis, luctus lorem habitant taciti venenatis. Neque curabitur porttitor morbi quisque.
        </p>
        <p>
        Semper venenatis maecenas eros adipiscing quam consectetur a aliquet duis tincidunt fringilla ipsum. Egestas adipiscing vitae suscipit ante ante vitae faucibus. Gravida velit commodo nulla integer fringilla orci eros mauris vitae. Habitasse tellus, maecenas ipsum. Lorem commodo proin litora. Habitasse massa litora nullam et et primis tristique posuere ut mauris ad viverra.
        </p>
        <p>
        In vestibulum iaculis posuere. Lacinia ut netus odio, sed donec ut amet laoreet fames. Per faucibus facilisis ad magna eu platea nisl class dis sapien. Vitae in sem dis faucibus. Nibh quisque malesuada feugiat ridiculus faucibus interdum primis blandit placerat orci morbi! Convallis turpis habitasse in facilisi! Nulla ad non morbi erat. Arcu dapibus pellentesque suscipit ridiculus porta. Etiam fermentum id tristique nullam diam. Varius turpis fringilla aenean lorem hendrerit, mattis sapien eleifend pretium magna adipiscing suspendisse. Placerat fermentum, curabitur placerat cum orci tellus cum. Mattis accumsan, maecenas lorem.
        </p>
        <p>
        Iaculis, quis cursus nostra accumsan. Ultrices nostra mattis himenaeos aenean feugiat iaculis facilisi magna primis hac. Dignissim bibendum montes fringilla lectus tellus mi. Dignissim leo in habitant natoque mus senectus quam, aliquam rhoncus. Ac sociis per parturient laoreet sagittis lorem. Magna gravida purus nam id egestas lectus conubia tellus. Rutrum libero adipiscing, velit sociis.
        </p>

    </body>

</html>

Scrolling

Let’s write some simple Javscript to do the scrolling:

scrollby.html

				
					<script>
        function do_scroll(){
            window.scroll(0,150);
        }
    </script>

Function parameters scroll(xCoord, yCoord)

In order to call the function, I will add a button at the top of the page, inside <body> and call the function when clicked, as follows:

scrollby.html

				
					<button onclick="do_scroll()">Scroll</button>

The full code:

scrollby.html

				
					<html DOCTYPE!>

    <body>
        <button onclick="do_scroll()">Scroll</button>
        <p>
        Interdum malesuada taciti bibendum praesent auctor facilisi rutrum non felis natoque phasellus. Adipiscing dapibus nec sem. Sagittis aptent magnis tristique erat lorem eget. Lectus mauris lacinia bibendum donec. Rhoncus ullamcorper vulputate felis aliquet neque, ultrices bibendum. Phasellus quis rutrum penatibus commodo non pharetra posuere potenti id! Primis hendrerit cursus aptent. Elementum parturient metus purus pulvinar enim sed cum class. Leo placerat fermentum vel aliquet tortor cursus ipsum. Egestas phasellus mus elementum felis! Metus rutrum, quam proin molestie ipsum. Magnis.
        </p>
        <p>
        Nibh sed ridiculus fermentum aenean tortor auctor facilisi magnis mi auctor. Litora urna rhoncus facilisi posuere rutrum ac sodales pellentesque ridiculus eros adipiscing fermentum. Nascetur cubilia porta ut enim, convallis urna rhoncus fermentum. Habitasse cras ullamcorper amet. Metus conubia at scelerisque cum mattis! Gravida euismod id vulputate dapibus porttitor pretium. Pellentesque tortor vulputate mus ornare mus habitasse. Cubilia fringilla proin lobortis ultrices torquent platea feugiat montes curabitur. Duis sociosqu parturient non primis magna per nibh morbi. Metus est odio posuere ut massa. Euismod tristique risus ad magna curae;! Felis, luctus lorem habitant taciti venenatis. Neque curabitur porttitor morbi quisque.
        </p>
        <p>
        Semper venenatis maecenas eros adipiscing quam consectetur a aliquet duis tincidunt fringilla ipsum. Egestas adipiscing vitae suscipit ante ante vitae faucibus. Gravida velit commodo nulla integer fringilla orci eros mauris vitae. Habitasse tellus, maecenas ipsum. Lorem commodo proin litora. Habitasse massa litora nullam et et primis tristique posuere ut mauris ad viverra.
        </p>
        <p>
        In vestibulum iaculis posuere. Lacinia ut netus odio, sed donec ut amet laoreet fames. Per faucibus facilisis ad magna eu platea nisl class dis sapien. Vitae in sem dis faucibus. Nibh quisque malesuada feugiat ridiculus faucibus interdum primis blandit placerat orci morbi! Convallis turpis habitasse in facilisi! Nulla ad non morbi erat. Arcu dapibus pellentesque suscipit ridiculus porta. Etiam fermentum id tristique nullam diam. Varius turpis fringilla aenean lorem hendrerit, mattis sapien eleifend pretium magna adipiscing suspendisse. Placerat fermentum, curabitur placerat cum orci tellus cum. Mattis accumsan, maecenas lorem.
        </p>
        <p>
        Iaculis, quis cursus nostra accumsan. Ultrices nostra mattis himenaeos aenean feugiat iaculis facilisi magna primis hac. Dignissim bibendum montes fringilla lectus tellus mi. Dignissim leo in habitant natoque mus senectus quam, aliquam rhoncus. Ac sociis per parturient laoreet sagittis lorem. Magna gravida purus nam id egestas lectus conubia tellus. Rutrum libero adipiscing, velit sociis.
        </p>
        <p>
        Interdum malesuada taciti bibendum praesent auctor facilisi rutrum non felis natoque phasellus. Adipiscing dapibus nec sem. Sagittis aptent magnis tristique erat lorem eget. Lectus mauris lacinia bibendum donec. Rhoncus ullamcorper vulputate felis aliquet neque, ultrices bibendum. Phasellus quis rutrum penatibus commodo non pharetra posuere potenti id! Primis hendrerit cursus aptent. Elementum parturient metus purus pulvinar enim sed cum class. Leo placerat fermentum vel aliquet tortor cursus ipsum. Egestas phasellus mus elementum felis! Metus rutrum, quam proin molestie ipsum. Magnis.
        </p>
        <p>
        Nibh sed ridiculus fermentum aenean tortor auctor facilisi magnis mi auctor. Litora urna rhoncus facilisi posuere rutrum ac sodales pellentesque ridiculus eros adipiscing fermentum. Nascetur cubilia porta ut enim, convallis urna rhoncus fermentum. Habitasse cras ullamcorper amet. Metus conubia at scelerisque cum mattis! Gravida euismod id vulputate dapibus porttitor pretium. Pellentesque tortor vulputate mus ornare mus habitasse. Cubilia fringilla proin lobortis ultrices torquent platea feugiat montes curabitur. Duis sociosqu parturient non primis magna per nibh morbi. Metus est odio posuere ut massa. Euismod tristique risus ad magna curae;! Felis, luctus lorem habitant taciti venenatis. Neque curabitur porttitor morbi quisque.
        </p>
        <p>
        Semper venenatis maecenas eros adipiscing quam consectetur a aliquet duis tincidunt fringilla ipsum. Egestas adipiscing vitae suscipit ante ante vitae faucibus. Gravida velit commodo nulla integer fringilla orci eros mauris vitae. Habitasse tellus, maecenas ipsum. Lorem commodo proin litora. Habitasse massa litora nullam et et primis tristique posuere ut mauris ad viverra.
        </p>
        <p>
        In vestibulum iaculis posuere. Lacinia ut netus odio, sed donec ut amet laoreet fames. Per faucibus facilisis ad magna eu platea nisl class dis sapien. Vitae in sem dis faucibus. Nibh quisque malesuada feugiat ridiculus faucibus interdum primis blandit placerat orci morbi! Convallis turpis habitasse in facilisi! Nulla ad non morbi erat. Arcu dapibus pellentesque suscipit ridiculus porta. Etiam fermentum id tristique nullam diam. Varius turpis fringilla aenean lorem hendrerit, mattis sapien eleifend pretium magna adipiscing suspendisse. Placerat fermentum, curabitur placerat cum orci tellus cum. Mattis accumsan, maecenas lorem.
        </p>
        <p>
        Iaculis, quis cursus nostra accumsan. Ultrices nostra mattis himenaeos aenean feugiat iaculis facilisi magna primis hac. Dignissim bibendum montes fringilla lectus tellus mi. Dignissim leo in habitant natoque mus senectus quam, aliquam rhoncus. Ac sociis per parturient laoreet sagittis lorem. Magna gravida purus nam id egestas lectus conubia tellus. Rutrum libero adipiscing, velit sociis.
        </p>
        <p>
        In vestibulum iaculis posuere. Lacinia ut netus odio, sed donec ut amet laoreet fames. Per faucibus facilisis ad magna eu platea nisl class dis sapien. Vitae in sem dis faucibus. Nibh quisque malesuada feugiat ridiculus faucibus interdum primis blandit placerat orci morbi! Convallis turpis habitasse in facilisi! Nulla ad non morbi erat. Arcu dapibus pellentesque suscipit ridiculus porta. Etiam fermentum id tristique nullam diam. Varius turpis fringilla aenean lorem hendrerit, mattis sapien eleifend pretium magna adipiscing suspendisse. Placerat fermentum, curabitur placerat cum orci tellus cum. Mattis accumsan, maecenas lorem.
        </p>
        <p>
        Iaculis, quis cursus nostra accumsan. Ultrices nostra mattis himenaeos aenean feugiat iaculis facilisi magna primis hac. Dignissim bibendum montes fringilla lectus tellus mi. Dignissim leo in habitant natoque mus senectus quam, aliquam rhoncus. Ac sociis per parturient laoreet sagittis lorem. Magna gravida purus nam id egestas lectus conubia tellus. Rutrum libero adipiscing, velit sociis.
        </p>
            <p>
        In vestibulum iaculis posuere. Lacinia ut netus odio, sed donec ut amet laoreet fames. Per faucibus facilisis ad magna eu platea nisl class dis sapien. Vitae in sem dis faucibus. Nibh quisque malesuada feugiat ridiculus faucibus interdum primis blandit placerat orci morbi! Convallis turpis habitasse in facilisi! Nulla ad non morbi erat. Arcu dapibus pellentesque suscipit ridiculus porta. Etiam fermentum id tristique nullam diam. Varius turpis fringilla aenean lorem hendrerit, mattis sapien eleifend pretium magna adipiscing suspendisse. Placerat fermentum, curabitur placerat cum orci tellus cum. Mattis accumsan, maecenas lorem.
        </p>
        <p>
        Iaculis, quis cursus nostra accumsan. Ultrices nostra mattis himenaeos aenean feugiat iaculis facilisi magna primis hac. Dignissim bibendum montes fringilla lectus tellus mi. Dignissim leo in habitant natoque mus senectus quam, aliquam rhoncus. Ac sociis per parturient laoreet sagittis lorem. Magna gravida purus nam id egestas lectus conubia tellus. Rutrum libero adipiscing, velit sociis.
        </p>
    </body>

    <script>
        function do_scroll(){
            window.scroll(0,150);
        }
    </script>

</html>

output

We can see the button at the top and that the webpage is currently scrolled up. Let’s press the button:

running

Smooth scrolling

We can specify the way the scrolling happens by passing an object with options as a parameter in the scroll() function. For example:

scrollby.html

				
					function do_scroll(){
        window.scroll({
          top: 500,
          left: 0,
          behavior: "smooth",
        });
    }

Function parameters scroll(options)

running

conclusion

In this post we saw how to use the scroll() method from the window object – available to us to manipulate the window object (the web browser).

References

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

Share it!

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

Tagged js-window