Detailed explanation of scrollTop in javascript

scrollTop represents the height of the scroll, and the default scrollTop (offset) offset represents the offset relative to the top, in pixels, <br/>
The scrollTop() scroll height can not only set the scroll value, but also "get" the scroll value.
When setting the scroll value, the method sets the scroll value of all matching elements.
When obtaining the scroll value, the method returns only the scroll position of the first matching element.
If you need to get the value of scrollTop, you can refer to the following code:

Copy the codeThe code is as follows:

var scrollTop = || ||;

1. The differences between scrollTop in each browser

IE6/7/8：
For pages without doctype declarations, you can use to get scrollTop height;
For pages with doctype declarations, you can use it;
Safari:
safari is quite special, it has its own function to obtain scrollTop: ;
Firefox:
Firefox and other relatively standard browsers are much more worry-free, so use them directly;

2. Get scrollTop value

Perfectly obtain scrollTop assignment phrase:

Copy the codeThe code is as follows:

var scrollTop = || || ;

This assignment allows you to obtain the scrollTop value in any case.
If you observe this assignment carefully, what have you found? ?
That's right, it's (Safari) being placed in the middle of ||.
Because when the number 0 is performed or operated with undefined, the system returns the last value by default. Even if the operation is 0 == undefined;
When the page scrollbar is just at the top, that is, the scrollTop value is 0. Under IE, (Safari) returns to undefined. When (Safari) is placed at the end of the or operation, scrollTop returns undefined. Undefined will be used in the next operation.
Other browsers will not return undefined regardless of scrollTop assignment or operation order. It can be used safely..
So at the end it is still the IE problem.
I was a little dazed and I don’t know if I had expressed it clearly.
However, in the end, this sentence has been summarized as OK, so everyone can use it with confidence;

Copy the codeThe code is as follows:

var scrollTop = || || ;

DTD related instructions:

Used when the page has DTD, or DOCTYPE is specified.

When the page does not have DTD, or DOCTYPE is not specified, it is used.

This is true in both IE and Firefox.

For compatibility, whether there is or not, the following code can be used:

Copy the codeThe code is as follows:

var scrollTop = //For FF

                ||   

                ||   

                || 0;

DocumentElement and body related instructions:

body is a body child node in the DOM object, that is, the <body> tag;

documentElement is the root node root of the entire node tree, that is, the <html> tag;

DOM calls every object in the hierarchy a node, which is a hierarchy. You can understand it as a tree structure, just like our directory, a root directory, with subdirectories under the root directory and subdirectories under the subdirectories.

Take the HTML hypertext markup language as an example: one root of the entire document is that it can be used in the DOM to access it, which is the root node of the entire node tree. The body is a child node. To access the body tag, it should be written in the script:.

If you want to click the button to scroll to the top of the page, use jquery to click $(document).scrollTop(0) to scroll to the top.

The same scroll position scrollLeft indicates the position of scrolling to the left.

The above is the entire content of this article, I hope you like it.