Home > Developer > JavaScript
The scrolltop represents the height of the scroll, default from position:0, and the offset of scrolltop (offset) represents the offset at the top, in pixels,<br/>
The scrolltop () scrolling height can either ' set ' the scrolling value or ' get ' the scrolling value.
When you set a scrolling value, the method sets the scroll value for all matching elements.
When you get a scrolling value, the method returns only the scroll position of the first matching element.
To obtain the ScrollTop value, you can refer to the following code:
1, the different browsers under the scrolltop difference
IE6/7/8:
Document.body.scrollTop can be used to get the scrolltop height for pages without DOCTYPE declarations;
For pages with DOCTYPE declarations, you can use Document.documentElement.scrollTop;
Safari:
Safari is special, has its own to obtain scrolltop function: Window.pageyoffset;
Firefox:
Firefox and so on relatively standard browser is much more worry, directly with Document.documentElement.scrollTop;
2. Get scrolltop Value
Perfect for getting scrolltop assignment phrases:
The value of scrolltop can be obtained in any case by the assignment of this sentence.
Look at the assignment, what do you see?
Yes, Window.pageyoffset (Safari) is placed in | | The middle position.
Because the system returns the last value by default when the number 0 is in the undefine or operation. In the operation of 0 = = Undefine;
When the page scroll bar is just at the top, the scrolltop value is 0 o'clock. IE Window.pageyoffset (Safari) returns to Undefine, when Window.pageyoffset (Safari) is placed on the last side of the operation, ScrollTop returns undefine, Undefi NE used in the next operation will be an error.
Other browsers do not return undefine regardless of scrolltop assignment or order of operations. Safe to use.
So the end is still ie problem. Cup with ...
Spirit a little trance, do not know whether there is no clear expression.
But finally summed up this sentence experiment OK, we rest assured that use;
DTD Related notes:
The page has a DTD, or when DOCTYPE is specified, use Document.documentelement.
The page does not have a DTD, or DOCTYPE is not specified, use Document.body.
This is true in both IE and Firefox.
For compatibility, whether or not there is a DTD, you can use the following code:
DocumentElement and Body related instructions:
The body is the body child node in the DOM object, that is, the <body> tag;
DocumentElement is the root node of the entire node tree, that is, the
Dom refers to each object in the hierarchy as a node, is a hierarchy, you can understand as a tree structure, like our directory, a root directory, the root directory has subdirectories, subdirectories also have subdirectories.
In the case of HTML Hypertext Markup Language: One root of the entire document is that it can be accessed using document.documentelement in the DOM, which is the root node of the entire node tree. And the body is a child node, to access the body tag, in the script should be written: Document.body.
If you want to click the button to scroll to the top of the page, use jquery to click Execute code $ (document). scrolltop (0) can be scrolled up to the top.
The same scrolling position scrollleft represents the position to scroll to the left.
The above mentioned is the entire content of this article, I hope you can enjoy.
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
