Kodeclik Blog
How to scroll automatically to the bottom of a webpage
We sometimes have a need to goto a webpage and quickly scroll all the way to the bottom of it, e.g., to see who has written it, or to look at the comments section, or to look for social media icons so that we can share it to our friends. But what if we would like to do this programmatically, e.g., make a program to scroll down a page?
When will we need to do this? We might need to scroll down say 100s of pages and it will be too laborious to do it manually. In such cases, it is useful to find a way to do it automatically. In this blogpost, we show you how!
Let us create a Javascript program that prints numbers from 1 to 10,000 (so that we create a long webpage - if you have other ways to create a long webpage, you can substitute it here). Then we superimpose a button on top of this page. When the page first loads, it displays the start of the series, like so:
After we press the button, the page scrolls down to:
Isn’t that neat? How do we accomplish this feat? It is actually quite simple!
Below is the actual code for doing the above:
<!DOCTYPE html>
<html>
<head>
<title>Scroll to Bottom Example</title>
<style>
#content {
height: 2000px;
/* Adding a tall content for demonstration */
position: relative;
font-size: 20px;
/* Increase font size for better visibility */
}
#scrollButton {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Lots of content here -->
<p>
<script>
let numbers = '';
for (let i = 1; i <= 10000; i++) {
numbers += i + ' ';
}
document.write(numbers);
</script>
</p>
<button id="scrollButton">Scroll to Bottom</button>
<script>
document.getElementById('scrollButton').addEventListener('click', function() {
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>Note that our page consists of HTML, CSS, and Javascript. The HTML section includes a button with the id "scrollButton" and a div with the id "content." Inside the div, there is a script that generates numbers from 1 to 10,000 with spaces in between using Javascript's document.write method.
The Javascript section includes an event listener for the button that triggers a function to scroll to the bottom of the page when the button is clicked. The code achieves this by utilizing Javascript to manipulate the scroll position of the webpage. Specifically, the Javascript code listens for a click event on the button and then uses the window.scrollTo method to scroll to the bottom of the page by setting the y-coordinate to the document's body.scrollHeight.
Thus all the magic is accomplished by the window.scrollTo method that scrolls to the bottom of the page by setting the y-coordinate to the document's body.scrollHeight.
In conclusion, you can see that the code can be broken down into the following key components: (1) HTML structure with a button and a content div, (2) Javascript code to generate numbers and handle the scroll functionality, and (3) CSS styling for the content and the scroll button.
Overall, the code provides a simple and effective way to implement a "scroll to bottom" feature on a webpage, enhancing user experience by allowing them to easily navigate to the end of the content with a single click.
If you liked this blogpost, checkout our post on using Javascript’s Slick.js to create a Carousel. Also learn how to open all links in new tabs using Javascript!
Want to learn Javascript with us? Sign up for 1:1 or small group classes.
