Home »
jQuery »
jQuery Examples
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:
