How to Scroll Automatically to the Bottom of the Page in JavaScript
Mehvish Ashiq
Feb 02, 2024
-
Use JavaScript
scrollToFunction to Scroll to the Bottom -
Use JavaScript
scrollIntoViewFunction to Scroll to the Bottom -
Use JavaScript
scrollTopFunction to Scroll to the Bottom -
Use JavaScript
ScrollingElementFunction to Scroll to the Bottom -
Use JavaScript
scrollByFunction to Scroll to the Bottom
We aim to educate you about different methods to scroll automatically to the bottom of the page in JavaScript. This tutorial also teaches you to scroll to specific coordinates on the screen with and without animation.
Use JavaScript scrollTo Function to Scroll to the Bottom
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<button id="bottompage">Bottom</button>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h1> Hi There! </h1>
</body>
</html>
CSS Code:
button{
float:right;
background-color:yellow;
color:red;
}
JavaScript Code:
document.querySelector('#bottompage').addEventListener('click', () => {
window.scrollTo(0, document.body.scrollHeight);
})
The code given above selects the tag element whose id’s value is bottompage. Whenever it is clicked, an event triggers that scrolls to the bottom of the page (scroll vertically) because x is set to 0 and y is set to document.body.scrollHeight that is 1655px.
The scrollTo function is used to scroll the document to the provided coordinates of the web page. This method works if the scroll bar is visible and the document is large compared to the screen.
Both parameters of scrollTo() method are required. The parameter x tells how much to scroll horizontally in pixels and y about vertically in pixels.
You might be thinking about how the height is calculated? For that, you can read this to understand all calculations for height.
Use JavaScript scrollIntoView Function to Scroll to the Bottom
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a id="heading_one" href="javascript:void(0)">Heading 1</a>
<a id="heading_two" href="javascript:void(0)">Heading 2</a>
<a id="heading_three" href="javascript:void(0)">Heading 3</a>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<ul>
<li>List one in heading two</li>
<li>List two in heading two</li>
<li id="list3">List three in heading two</li>
<li>List four in heading two</li>
<li>List five in heading two</li>
<li>List six in heading two</li>
<li>List seven in heading two</li>
<li>List eight in heading two</li>
</ul>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676?
b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h1> Hi There! </h1>
</body>
</html>
CSS Code:
button{
float:right;
background-color:yellow;
color:red;
}
a{
display: block;
}
JavaScript Code:
let hone = document.querySelector('#heading_one');
let listthree = document.querySelector('#list3');
hone.addEventListener('click', navigatelistthree, false);
function navigatelistthree(e) {
listthree.scrollIntoView({behavior: 'smooth'});
}
In this example code, the querySelector gets the first element that has the value of the id attribute as heading_one and saves it into the hone variable. After that, it selects the first element having the value of id as list3 and stores it into the variable named listthree.
Whenever you click on the Heading 1 hyperlink, the navigatelistthree method gets executed. This function takes you to the third list item under Heading 2, written as List three in heading two.
The scrollIntoView method helps you scroll an element in the view. It is used where you want a particular element to be highlighted and you want it to be scrolled.
This method accepts one parameter; it can be a Boolean value or an object.
You can use scrollIntoView() to jump right away at the element where you want to be. Or, you can use the behavior property to scroll smoothly.
Check this link to learn more about scrollIntoView() function parameters.
Use JavaScript scrollTop Function to Scroll to the Bottom
HTML Code:
<div id="boxcontent">
<div class="maincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<button id="button">Scroll to Bottom</button>
CSS Code:
#boxcontent {
height: 200px;
width: 300px;
overflow: scroll;
width: 300px;
}
.maincontent {
width: 100%;
height: 400px;
}
JavaScript Code:
document.getElementById('button').addEventListener('click', function() {
var element = document.getElementById('boxcontent');
element.scrollTop = element.scrollHeight;
});
Firstly, the element whose id’s value is button gets selected if you click on the Scroll to Bottom button. Then, another element whose id attribute’s value is boxcontent is selected and saved into the element variable.
It takes you to the end of the content box, which is scrollable because the value of the element.scrollHeight is assigned to the element.scrollTop. You can check more details here to practice.
The property named scrollTop in JavaScript sets or gets the number of pixels that the content of an element is scrolled vertically.
The scrollTop value will be zero if the non-scrollable property is associated with an element. Or the element has no overflow. Keep in mind that this property sets itself to ZERO if there are negative values.
Use JavaScript ScrollingElement Function to Scroll to the Bottom
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<button id="bottompage">Bottom</button>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract- technology-background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h1> Hi There! </h1>
</body>
</html>
CSS Code:
button{
float:right;
background-color:yellow;
color:red;
}
JavaScript Code:
document.querySelector('#bottompage').addEventListener('click', () => {
var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
})
The code given above selects the tag element with the id as bottompage.
An event will be fired when you click on the element whose id’s value is bottompage. After that, the reference of the root element (HTML tag) or body tag (whatever is available) is saved in a variable named scrollingElement.
Further, the value of scrollTop is changed from 0px to 1310px due to assigning the value of scrollingElement.scrollHeight to scrollingElement.scrollTop.
Use JavaScript scrollBy Function to Scroll to the Bottom
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Automatically</title>
</head>
<body id='main_body'>
<div id="headingone">
<h1>Heading One</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingtwo">
<h1>Heading Two</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="headingthree">
<h1>Heading Three</h1>
<img src="https://media.istockphoto.com/photos/programming-code-abstract-technology- background-of-software-developer-picture-id1294521676? b=1&k=20&m=1294521676&s=170667a&w=0&h=7pqhrZcqqbQq43Q0_TD0Y_YjInAyvA9xiht9bto030U=" alt="Programming Picture">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>
CSS Code:
body{
background-color:lightgray;
}
h1{
color:red;
}
JavaScript Code:
let scrollID;
let stopped = true;
let scrollSpeed = 2; // 1 - Fast | 2 - Medium | 3 - Slow
let scrollInterval = scrollSpeed * 3;
function startScrolling() {
let ID = setInterval(function() {
window.scrollBy(0, 2);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// Reached end of page
stopScroll();
}
}, scrollInterval);
return ID;
}
function stopScroll() {
clearInterval(scrollID);
}
document.body.addEventListener('keypress', function(event) {
if (event.which == 13 || event.keyCode == 13) {
// It's the 'Enter' key
if (stopped == true) {
scrollID = startScrolling();
stopped = false;
} else {
stopScroll();
stopped = true;
}
}
}, true);
We used the scrollBy function inside the setInterval method to animate the scrolling in this example code.
The scrollBy method is used when you want your page to be scrolled to a certain number of pixels. The scrollBy function takes two parameters, x and y (both are required).
The setInterval() method calls a function on a given interval. The innerHeight returns the window’s interior height (in pixels). The scrollY returns the number of pixels that the document is scrolled vertically now.
The read-only property named offsetHeight returns the height of an element (in our example, it is the body tag) as an integer. This height includes borders and vertical padding.
The code above scrolls the web page if the Enter key is pressed. And stop scrolling in two ways, either the Enter key is pressed again or the sum of the window.innerHeight and window.scrollY is greater than or equal to the document.body.offsetHeight.
Author: Mehvish Ashiq
