JavaScript Scroll Page to Bottom

In this tutorial we will learn How to Scroll Page to Bottom with JavaScript. We can use window.scroll() method and scrollHeight property to calculate height of the page and scroll page to the bottom.

Table of Contents

window.scroll() method

window.scroll() method is used to scroll the page to the specific point.

Both x-coordinates and y-coordinates are defined to specify that point.

scrollHeight property

scrollHeight property returns the height of the HTML element including the padding and without including border, margins and scrollbars.

HTML Code

HTML Code is given below, in this code we have a button tag with onclick event to trigger a function which will scroll the page to bottom.


<!DOCTYPE html>
<html>
<head>
<title>JavaScript Scroll Page to Bottom</title>   
</head>             
<body style='height: 3000px;'>
    
<button onclick="scrollToBottom()">Scroll to Bottom</button>    
    
<script src="script.js"></script>    
</body>
</html>

JavaScript Code

Take a look at the JavaScript code, user defined function scrollToBottom() will scroll the web page to bottom.

scrollHeight will first measure the total height of page in pixels.

Then window.scroll() method will scroll the page to that point, which is also the bottom of the page.


<script>
function scrollToBottom()
{
    var height = document.body.scrollHeight;
    window.scroll(0 , height);
}
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on How To Scroll Web Page to Bottom using JavaScript.