Updated February 21, 2023
Definition on jQuery scroll bottom
jQuery scroll bottom method scrolls by passing the document’s height to the scrollTop method. In jQuery, we can automatically use the scrollTop and height methods to scroll a page from top to bottom. The number of pixels hidden from the view above the scrollable region determines the vertical scroll position. This value will be 0 if the scroll bar is at the very top or if the element is not scrollable.
What is the jQuery scroll bottom?
- The location of the browser Scrollbar is controlled by the jQuery scrollTop attribute.
- The number of pixels hidden from the view above the scrollable region determines the vertical scroll position. Each matched element’s vertical scroll is positioned by setting the scrollTop property.
- ScrollToBottom scrolls the page from top to bottom, whereas scrollToTop scrolls the page from bottom to top.
- When the scrollToBottom HTML Anchor link is clicked, the jQuery click event handler is invoked, which uses the jQuery animate function to scroll the page from top to bottom.
- When the scrollToTop HTML Anchor link is clicked, the jQuery click event handler is invoked, which uses the jQuery animate function to scroll the page from bottom to top.
- The scrollTop method sets or returns the vertical scrollbar position for the selected components.
- The position is zero when the scrollbar is at the top. The vertical scrollbar position for the first matched element is returned by this method. This function sets the vertical position of the scrollbar for all matching components.
- The jQuery scroll bottom event occurs when we scroll the page to the bottom. This is handled using function names such as scrollTop, animate, and scroll.
How to jQuery scroll bottom?
- Returns the browser viewport height using $(window) and height(). The height of an HTML document is returned via $(document).height().
- The current vertical position of the scroll bar is returned by scrollTop(). If the scroll bar is at the top, the value of $ will be at the bottom (window).
- The result of scrollTop() is zero. This is because the user has scrolled to the bottom of the page if the value of the browser viewport plus the vertical position of the scroll bar is equal to the document height.
Below, the syntax code shows how to scroll the page using jQuery.
Syntax:
$(window).load (function () {
scrollTop: $(document).height);
});- We have used the height function in the above code, so the page is scrolling from top to bottom. We can also use the animate method with jQuery.
- The scroll() jQuery event can determine if the user has scrolled to the bottom of the page.
- When the user scrolls to different parts of the element, the element receives a scroll event. It affects window objects, scrollable frames, and elements set to “scroll” or “auto” in the CSS overflow property.
- To scroll the page from top to bottom, we first need to add the scroll to the top using jQuery.
- After adding the scroll to the top method, we need to add the scroll button to the CSS.
- After adding the scroll button into the CSS, the next step is to add the jQuery scroll to the top function.
Page using jQuery
- In jQuery, the page is the primary unit of interaction. It organizes content into logical views that can be animated in and out of view using page transitions.
- As visitors navigate around an HTML document, the AJAX navigation system will load extra pages into the DOM on demand.
- Alternatively, an HTML document can have numerous “pages,” and the framework will transition between them without requiring material from the server.
- The location reloads method simulates the refresh button on the browser by reloading the current web page.
- The true argument forces the page to load from the server, bypassing the browser cache.
- Depending on the parameter supplied, the history goes method fetches a URL from the browser’s history. If the argument is set to ‘0,’ the current page is reloaded.
- JQuery is a JavaScript library that makes it easier for HTML/CSS documents to interact with each other.
- The location pathname as a parameter can be supplied to the replace method. The current URL is returned by location pathname, which is passed to location. The current page is reloaded when replace method is used.
JQuery scroll bottom examples
The example below shows that scroll the page to the bottom without animation.
Code:
<!DOCTYPE html>
<html>
<head>
<title> JQuery scroll bottom </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$(document).scrollTop($(document).height());
});
});
</script>
<style>
h1 {
color: Pink;
}
</style>
</head>
<body>
<center>
<div>
<button> Click Here to go bottom of the page </button>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
<h1> JQuery scroll page to the bottom </h1>
</div>
</center>
</body>
</html>
The below example shows scroll the page to the bottom using animation as follows.
Code:
<!DOCTYPE html>
<html>
<head>
<title> JQuery scroll bottom </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("html, body").animate({
scrollTop: $(
'html, body').get(0).scrollHeight
}, 2000);
});
});
</script>
<style>
h1 {
color: Pink;
}
</style>
</head>
<body>
<center>
<div>
<button> Click Here to go bottom of the page </button>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
<h1> JQuery scroll bottom </h1>
</div>
</center>
</body>
</html>
Conclusion
The scrollTop attribute is used to scroll the page to the top or bottom of the page. When scrolling to the top of the page, the scrollTop property is set to Zero, and when scrolling to the bottom, the scrollTop value is set to the document’s height.
Recommended Articles
This is a guide to jQuery scroll bottom. Here we discuss the definition, What is jQuery scroll bottom, and examples with code implementation and syntax. You may also have a look at the following articles to learn more –
