javascript scrollTop

scrollTop represents the height of scrolling, default from position:0; Start rolling down, offset of scrollTop (offset) represents the offset relative to the top, in pixels, < br/ >
scrollTop() can 'set' or 'get' the scroll value.
When the scroll value is set, the method sets the scroll values for all matched elements.
When getting the scroll value, this method only returns the scroll position of the first matched element.
To get the value of scrollTop, you can refer to the following code:

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

1. Differences of scrollTop in different browsers

IE6/7/8:
For pages without an doctype declaration, you can use document.body.scrollTop to get the scrollTop height;
You can use document.documentElement.scrollTop for pages with doctype declarations;
Safari:
safari is special. It has its own function to get scrollTop: window.pageYOffset;
Firefox:
Firefox and other standard browsers are a lot easier to work with, so use document.documentElement.scrollTop;

2. Get scrollTop value

Get the scrollTop assignment phrase perfectly:

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

The scrollTop value can be obtained in any case by this assignment.
Look closely at this assignment. Do you see anything?
That's right, window.pageYOffset (Safari) is placed in the middle of |, |.
Because when the number 0 is or with undefine, the system returns the last value by default. Zero == undefine;
When the page scrollbar is just at the top, the scrollTop value is 0. IE, window.pageYOffset (Safari) returns undefine. scrollTop (Safari) returns undefine when window.pageYOffset (Safari) is placed at the end of the or operation.
Other browsers will not return undefine regardless of the assignment or order of operations. It is safe to use...
So it's all about IE.
The spirit is a bit absentminded, do not know whether to express clearly.
But in the end, we can conclude that OK has been used in this experiment.

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

Related notes on DTD:

document.documentElement is used when the page has DTD, or when DOCTYPE is specified.

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

This is true for both IE and Firefox.

For compatibility, with or without DTD, you can use the following code:

var scrollTop = window.pageYOffset  // Used for FF

                || document.documentElement.scrollTop  

                || document.body.scrollTop  

                || 0;

documentElement and body

body is the body child node in the DOM object, i.e < body > The label;

documentElement is the root node of the entire node tree, root, i.e < html > The label;

DOM refers to each object in the hierarchy as a node, which is a hierarchy. You can understand it as a tree structure, just like our directory 1, which is a root directory. There are subdirectories under the root directory, and subdirectories under the subdirectory.

Take HTML for example: one root of the entire document, which can be accessed in DOM using document.documentElement, is the root of the entire node tree. While body is a child node, to access the body tag, the script should say: document.body.

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

The same scroll position, scrollLeft, indicates the position to scroll to the left.

That's all for this article, I hope you enjoy it.