How to Scroll to the Bottom of the Page With HTML

You don't have to click the scrollbar to navigate through a website.

If your HTML Web page has important information at the end of the page, users may hesitate to scroll there to view it. Long Web pages require site visitors to click the scroll bar many times to reach the bottom; the only way to jump there instantly is to press the "End" key. You can save your users a few mouse clicks by automating the scroll process using a few lines of JavaScript.

Instructions

1. Launch your HTML editor and open one of your Web pages. Choose a large page that requires scrolling to reach the end.

2. Insert the following code anywhere in document's "body" section:

   <input type="button" value="Scroll" onclick="return ScrollPage()" />

   This creates a button to use for testing the scroll function.

3. Add this JavaScript code to your document's "head" section:

   <script language="javascript" type="text/javascript">

   function ScrollPage() {

   var pageHeight = document.body.scrollHeight;

   window.scrollTo(0, pageHeight/2)

   }</script>

   This function runs when you click the button. The code stores the height of the page in the variable named "pageHeight" and uses the "scrollTo" function to scroll the page to the bottom.

4. Save the HTML document and view it in your browser. Click the "Scroll" button. The browser scrolls to the bottom of the page.

Tips & Warnings

• The "scrollTo" function and scrollHeight property make this scrolling possible. ScrollHeight holds the height of scrollable portion of the Web page. Use the same "scrollTo" function to scroll to other locations on a Web page automatically. For instance, to scroll to the middle of the page, change the last line of code in the JavaScript function to "window.scrollTo(0, pageHeight/2)" -- without the quotes. Dividing pageHeight by two causes the browser to scroll to mid-page.

References

• W3Schools: HTML DOM HTMLElement Object

Resources

• Tizag: Javascript Tutorial - Functions