Home > Developer > JavaScript
ScrollTop in javascript: javascriptscrolltop
ScrollTop indicates the scroll height. By default, it is rolled down from position: 0. The offset of scrollTop (offset) indicates the offset relative to the top, in pixels. <br/>
The height of scrollTop () can be either 'set' or 'get.
When you set the scroll value, this method sets the scroll value of all matching elements.
When obtaining the scroll value, this method returns only the scroll position of the First Matching Element.
To obtain the scrollTop value, refer to the following code:
Copy codeThe Code is as follows:
Var scrollTop = document.doc umentElement. scrollTop | window. pageYOfset | document. body. scrollTop;
1. Differences of scrollTop in different browsers
IE6/7/8:
For pages without doctype declaration, you can use document. body. scrollTop to obtain the scrollTop height;
For pages with doctype declaration, you can use document.doc umentElement. scrollTop;
Safari:
Safari is quite special. You have a function to get scrollTop: window. pageYOffset;
Firefox:
Firefox and other relatively standard browsers are much more worry-free. You can directly use document.doc umentElement. scrollTop;
2. Obtain the scrollTop Value
ScrollTop assignment phrase:
Copy codeThe Code is as follows:
Var scrollTop = document.doc umentElement. scrollTop | window. pageYOffset | document. body. scrollTop;
The scrollTop value can be obtained under any circumstances through this assignment.
After carefully observing the assignment, what did you find ??
That is, the window. pageYOffset (Safari) is placed in the center of |.
This is because the system returns the last value by default when the numbers 0 and undefine are used for or operations. 0 = undefine;
When the page scroll bar is at the top, that is, the scrollTop value is 0. Window in IE. pageYOffset (Safari) returns undefine. when pageYOffset (Safari) is placed at the end of the or operation, scrollTop returns undefine. When undefine is used for subsequent operations, an error is reported.
Other Browsers Do not return undefine regardless of the value assignment or operation sequence of scrollTop. It can be used safely ..
So it's still a problem with IE. Cup...
I am a little confused and do not know whether to express myself clearly.
However, the experiment is too good, so you can use it with confidence;
Copy codeThe Code is as follows:
Var scrollTop = document.doc umentElement. scrollTop | window. pageYOffset | document. body. scrollTop;
DTD description:
When a page has a DTD, or DOCTYPE is specified, document.doc umentElement is used.
Document. body is used when the page does not have a DTD or DOCTYPE is not specified.
This is true in both IE and Firefox.
To be compatible, use the following code regardless of whether there is a DTD:
Copy codeThe Code is as follows:
Var scrollTop = window. pageYOffset // used for FF
| Document.doc umentElement. scrollTop
| Document. body. scrollTop
| 0;
DocumentElement and body:
Body is the body subnode In the DOM object, that is, the <body> tag;
DocumentElement is the root node root of the entire node tree, that is, the
DOM calls every object in a hierarchy a node, which is a hierarchy. You can think of it as a tree structure. Just like our directory, a root directory contains subdirectories, there are also subdirectories under the subdirectory.
Take HTML hypertext markup language as an example: the root node of the entire document can be accessed using document.doc umentElement in dom. It is the root node of the entire node tree. The body is a subnode. To access the body tag, 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 code $ (document). scrollTop (0) to scroll to the top.
The same scroll position scrollLeft indicates the scroll position to the left.
The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
