jQuery | Scroll to bottom of the page

In this tutorial, we'll learn how to scroll down to the bottom of a webpage using jQuery?
Submitted by Pratishtha Saxena, on July 08, 2022

jQuery scrollTop() Method

The scrollTop() method returns the scroll bar position for the selected elements in jQuery. It is also used to set the value or position of the scroll bar for the page. The value of the scroll bar position will be zero pixels if the vertical scroll bar is at the top, i.e., it cannot scroll up anymore.

Syntax:

$(selector).scrollTop(position);

In addition to this method, we'll also need the height() method to scroll to the bottom of the page. This is also an inbuilt method just like the scrollTop() method in jQuery. It gives/checks the height of the selected element.

Syntax:

$(#id).height();

Let's see an example of how to scroll to the bottom of the page.

Example:

HTML:

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>

   <body style="background-color: lightgrey;">
      <center>
         <div>
            <button>Click Here To Scroll To Bottom Of the Page!</button><br><br>
            <h1>---------------------------------------------</h1>
            <h1>IncludeHelp is founded on 06th March 2015 by a computer programmer. At IncludeHelp, our aim
               is to make you "an expert in Computer programming languages".
            </h1>
            <h1>This site is specially designed to provide help to students, working professionals and job seekers.</h1>
            <h1>We are fully dedicated to make each tutorial very simple to learn and understand. </h1>
            <h1>This site is not created for business purpose, but for spreading education about programming
               languages and to help the concerned learners out who are enthusiastic to learn new technologies.
            </h1>
            <h1>IncludeHelp is a FREE site and will remain FREE in future as well.....
               If you find worthy to visit the website, kindly share it with your friends and colleagues.
            </h1>
            <h1>---------------------------------------------</h1>
            <h1>IncludeHelp is founded on 06th March 2015 by a computer programmer. At IncludeHelp, our aim
               is to make you "an expert in Computer programming languages".
            </h1>
            <h1>This site is specially designed to provide help to students, working professionals and job seekers.</h1>
            <h1>We are fully dedicated to make each tutorial very simple to learn and understand. </h1>
            <h1>This site is not created for business purpose, but for spreading education about programming
               languages and to help the concerned learners out who are enthusiastic to learn new technologies.
            </h1>
            <h1>IncludeHelp is a FREE site and will remain FREE in future as well.....
               If you find worthy to visit the website, kindly share it with your friends and colleagues.
            </h1>
            <br>
            <h1>---------------THE END----------------</h1>
         </div>
      </center>
   </body>
   
</html>

jQuery Function:

<script>
$(document).ready(function() {
	$("button").click(function() {
		$(document).scrollTop($(document).height());
	});
});
</script>

Output:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

jQuery | Which selector do I need to select an option by its text?

Related Examples

Comments and Discussions!

Load comments ↻