How to Scroll to the Bottom in JavaScript
The HTML Document Object Model (DOM) gives you substantial control over the structure and content of a Web page. The "scrollHeight" DOM property can be used to determine the total height of the body of the Web page, not just the visible portion. Combine this property with the "scrollTo" method of the "window" object to make a JavaScript function that instantly scrolls the user's browser window to the bottom of the page.
Instructions
-
-
1
Open your Web page code into an HTML editor. Insert the following code between the <head> tags of your HTML document:
<script type="text/javascript">
function ScrollToBottom(){
window.scrollTo(0,document.body.scrollHeight);
}
</script>
-
2
Make a button in the body of your document so the user can quickly scroll to the bottom. Insert the following tag into the body of your HTML document:
<input type="button" value="Scroll to bottom of page" onClick="ScrollToBottom();" />
-
-
3
Add the "onload" attribute to the <body> tag of your HTML document to call the function and scroll the page to the bottom as soon as the page loads. Here is an example:
<body onload="ScrollToBottom();">
-
4
Save the HTML code and load it onto your page to check that the scroll feature functions.
-
1