How to Scroll to the Bottom of the Page using Javascript
In this tutorial, you will learn how to scroll to the bottom of the page using javascript. The scrollbar generally appears when the size of the content exceeds the size of the browser window. There are mainly 2 types of scrollbars, horizontal and vertical.
To scroll vertically from top to bottom, we can make use of the scroll wheel which is present in the center of the mouse, or we can make use of the up arrow key. It can be annoying for users to scroll manually every time from top to bottom using these options. Instead, we should provide them with a one-click solution.
Certain third-party libraries are specifically created to solve scrolling-related issues. These libraries also contain some advanced features to enhance user experience. But for the sake of simplicity, we will go with plain vanilla javascript.
To accomplish our goal, we can make use of the scrollTo()
method of the window
object which helps in scrolling to a particular set of coordinates inside a given element. We just need to pass X and Y coordinates of the element or an options object as a parameter.
The X coordinate represents the pixel along the horizontal axis and the Y coordinate represents the pixel along the vertical axis of the element that we want to be displayed in the upper left.
In the following example, we have a button element and upon click of that button, we will scroll from top to bottom. Please have a look over the code example and the steps given below.
HTML & CSS
- We have 3 elements in the HTML file (
div
,h1
, andbutton
). Thediv
element is just a wrapper for the rest of the elements. - The
innerText
for theh1
element is“Scroll to Bottom”
and for thebutton
element, it is“Go to Bottom”
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
tag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <button>Go to Bottom</button> <h1>Scroll to Bottom</h1> </div> <script src="script.js"></script> </body> </html>
div { text-align: center; } h1 { margin-top: 200vh; } button { padding: 10px 20px; margin-bottom: 50px; }
Javascript
- We have selected the
button
element usingdocument.querySelector()
method and stored it in thebtnBottom
variable. - We have attached a
click
event listener to thebutton
element. - In the event handler function, we are calling the
scrollTo()
method and passing an options object as a parameter. Thetop
property is set to the height of thebody
element returned bydocument.body.scrollHeight
and it specifies the number of pixels along the Y-axis to scroll the window or element. Theleft
property is set to 0 and it specifies the number of pixels along the X-axis to scroll the window or element. Thebehavior
property is set tosmooth
and it specifies whether the scrolling should be smooth or happen instantly in a single jump.
let btnBottom = document.querySelector("button"); btnBottom.addEventListener("click", (e) => { window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); });