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.

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

Video Tutorial

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

How To Change Image Size with JavaScript How to change Image opacity with JavaScript How to Change image src on click with JavaScript How to get the lang attribute value in JavaScript How to Get attribute Value using JavaScript How To Check if Attribute Exists or not with JavaScript How To Count number of links on Page with JavaScript How To Scroll Page to Bottom using JavaScript How To Detect Shift Key Press with JavaScript Change Text Color On Hover with JavaScript Hide and Show div using JavaScript Get Button text with JavaScript Get textarea value with JavaScript Get table row Height with JavaScript Auto Increase width of input field with JavaScript Set Textarea maxLength with JavaScript Set Textarea Value with JavaScript JavaScript Count list items JavaScript set input field value Count Button Clicks with JavaScript Scroll Page to the Top on Click with JavaScript Change id of Element with JavaScript JavaScript Change li Text Color JavaScript Change li Text JavaScript Remove id from Element