Brief description: scrollTop is a very useful and important method in JavaScript. It is used to get or set the vertical scroll bar position of an element, and realize various scroll-related functions, whether it is returning to the top, scrolling to a specified position or listening to scroll events , all need to use scrollTop. In this article, we will learn more about the usage and practical application of scrollTop. This is a scrollTop relationship diagram for reference.
★☆Contents: 1. Attribute introduction 2. Attribute acquisition 3. Use details
1. Related attributes:
-
.scrollTop The distance from the container to the top;
-
.clientHeight the height of the container (viewable area);
-
.scrollHeight The pixel height of the container (total height);
Formula: scrollHeight - clientHeight = scrollTop
Naturally: scrollTop + clientHeight = scrollHeight
-
.offsetTop The top offset of the container (distance from the top of the parent box);
-
.onscroll Add a scroll event to an element;
-
.scrollTo(0,90) scroll to the specified coordinates;
-
.innerHeight The height of the document display area (similar to clientHeight);
2. Get the scrollTop value of the element:
var scrollTopValue = document.documentElement.scrollTop || document.body.scrollTop;
The above code first tries to get the scrollTop value of the root element of the document, ie <html>,
If the value is 0, get the scrollTop value of the <body> element,
This is done because different browsers may use different elements to represent the body of the document.
3. The scrollTop value is used for various purposes, the following are some practical application examples:
1. Back to the top of the page
When the user scrolls the page, we can add a "back to top" button at the bottom of the page. After clicking the button, the page will scroll to the top. The following is the relevant code:
var btn = document.getElementById("back-to-top");
btn.onclick = function() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
document.documentElement, returns the document element of a document,
This code sets the scrollTop value of both the document root element and the body element to 0, thus scrolling the page to the top.
2. Scroll to the specified position
We can use the scrollTop value to scroll the page to a specified position. Here is sample code:
var targetElement = document.getElementById("target-element");
var targetPosition = targetElement.offsetTop;
document.documentElement.scrollTop = targetPosition;
document.body.scrollTop = targetPosition;
This code sets the scrollTop value of both the document root element and the <body> element to the vertical offset of the target element (that is, the distance from the top of the document), thereby scrolling the page to the target position.
3. Listen to page scrolling events
We can use the scrollTop value to monitor page scrolling events to achieve various effects. Here is sample code:
window.onscroll = function () {
var scrollTopValue =
document.documentElement.scrollTop ||
document.body.scrollTop;
console.log(scrollTopValue);
}
This code will print the current scrollTop value when the page scrolls, which is convenient for us to do various processing.
4. Implement scrolling animation
By combining the scrollTop property with the requestAnimationFrame function, we can achieve a smooth scroll animation effect, for example, the following code will scroll the page to the top within 500 milliseconds:
function scrollToTop() {
const currentPosition = document.documentElement.scrollTop;
if (currentPosition > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, currentPosition - currentPosition / 10);
}
}
scrollToTop();
5. Implement infinite scrolling
Using the scrollTop property, we can detect the event that the page is scrolled to the bottom, and automatically load new content when scrolling to the bottom, thus achieving infinite scrolling. For example, the following code will load more content when the page is scrolled to the bottom:
window.addEventListener('scroll', function() {
if (document.documentElement.scrollTop +
window.innerHeight ==
document.documentElement.scrollHeight) {
// Load more content here
console.log("到底了");
}
});
Replenish:
window.addEventListener('scroll', function () { }); //OK
window.onscroll = function () { }； //OK
If you find it useful, just click three times, thank you (●'◡'●)