Detailed explanation of scrollTop in javascript_javascript skills

scrollTop represents the height of the scroll. By default, scrolling starts from position:0;. The offset of scrollTop (offset) represents the offset from the top, in pixels,

The scrolling height of scrollTop() can both 'set' the scroll value and 'get' the scroll value.
When a scroll value is set, this method sets the scroll value for all matching elements.
When getting the scroll value, this method only returns the scroll position of the first matching element.
To get the value of scrollTop, you can refer to the following code:

Copy code The code is as follows:

var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;

1. Differences in scrollTop between browsers

IE6/7/8:
For pages without doctype declaration, you can use document.body.scrollTop to get the scrollTop height;
For pages with doctype declaration, you can use document.documentElement.scrollTop;
Safari:
Safari is special, it has its own function to get scrollTop: window.pageYOffset;
Firefox:
Firefox and other relatively standard browsers are much more worry-free, just use document.documentElement.scrollTop ;

2. Get scrollTop value

Perfectly obtain scrollTop assignment phrase:

Copy code The code is as follows:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

The scrollTop value can be obtained under any circumstances through this assignment.
Observe this assignment carefully, do you notice anything? ?
That's right, window.pageYOffset (Safari) is placed in the middle of ||.
Because when the number 0 is ORed with undefine, the system returns the last value by default. That is, 0 == undefine in OR operation;
When the page scroll bar is just at the top, that is, when the scrollTop value is 0. Under IE, window.pageYOffset (Safari) returns undefine. At this time, when window.pageYOffset (Safari) is placed at the end of the OR operation, scrollTop returns undefine. If undefine is used in the next operation, an error will be reported.
Other browsers will not return undefine regardless of scrollTop assignment or operation order. It can be used safely..
So in the end it’s still IE’s problem. Damn...
I'm a little confused, I don't know if I can express myself clearly.
But in the end, I concluded that this sentence has been tested and is OK, so you can use it with confidence;

Copy code The code is as follows:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

DTD related instructions:

When the page has a DTD, or DOCTYPE is specified, use document.documentElement.

When the page does not have a DTD, or DOCTYPE is not specified, document.body is used.

This is true in both IE and Firefox.

For compatibility, regardless of whether there is a DTD, you can use the following code:

Copy code The code is as follows:

var scrollTop = window.pageYOffset //for FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;

DocumentElement and body related instructions:

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

documentElement is the root node root of the entire node tree, which is the tag;

DOM calls each object in the hierarchy a node, which is a hierarchical structure. You can understand it as a tree structure, just like our directory, a root directory, and there are subdirectories under the root directory. There are also subdirectories under the directory.

Take HTML Hypertext Markup Language as an example: one root of the entire document is, which can be accessed using document.documentElement in the DOM. It is the root node of the entire node tree. The body is a child node. To access the body tag, you should write: document.body in the script.

If you want to click the button to scroll to the top of the page, use jquery to click and execute the code $(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 all like it.