ScrollTop usage instructions _ basic knowledge

What is the scrollTop attribute? In some cases, the height of "content in the element" exceeds the height of "element itself". In the following example, the height of the outer element is 200px, the height of the inner element is 300px. Obviously, the content in the outer element is higher than that in the outer element itself. when a scroll bar is dragged down, some content is invisible beyond the upper boundary of the outer element, and scrollTop is equal to the height of this part of "invisible content.
Demonstration: (drag the scroll bar to see the changes in the scrollTop value)
The text is displayed in the inner layer element.
The scrollTop value is:

<P style = "width: 200px; height: 200px; background-color: #999999; overflow: auto;" id = "outer element"> <p style = "width: 100px; height: 300px; background-color: # FFFF00; "id =" inner element "> the text is displayed in the inner element. </P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Explanation:
The height of the inner element is 300px> the height of the outer element is 200px. Therefore, the content of the outer element (that is, the content of the inner element) cannot be completely displayed, the outer element sets overflow to auto, so a slide bar in the upper and lower directions appears on the right of the outer element.
In the initial state, the "upper boundary of the inner element" and "upper boundary of the outer element" overlap, and no content exceeds the "upper boundary of the outer element". At this time, the value of the scrollTop attribute is 0.
When the scroll bar is dragged down, content that exceeds the upper boundary of the outer element will gradually increase, and the scrollTop value will be equal to the excess parts.
When you drag the scroll bar to the bottom, the "bottom boundary of the inner element" and "bottom boundary of the outer element" overlap, the height of the content that exceeds the upper boundary of the outer element is 300px-200px = 100px, which is the scrollTop value at this time.
Use js Code to read and write scrollTop values
Note: scrollTop is used by element. scrollTop, instead of element. style. scrollTop.
Use js Code to read scrollTop values
The scrollTop read operation is actually used in the demo above. Specifically, when you drag a scroll bar, the scrollTop value is read and displayed in the text below.
The complete original code of the demo instance above:

<P style = "width: 200px; height: 200px; background-color: #999999; overflow: auto;" id = "outer element"> <p style = "width: 100px; height: 300px; background-color: # FFFF00; "id =" inner element "> the text is displayed in the inner element. </P> <p> scrollTop: </p> <script type = "text/javascript"> var outer element _ p = document. getElementById ("outer element"); outer element _ p. onscroll = reads the scrollTop value and displays it; // registers the onscroll event handler function. When a scroll bar is dragged, The onscroll event var span _ value of the scrollTop demonstration element = document. getElementById ("the value of scrollTop in the demo element"); // The onscroll event handler function reads the value of scrollTop and displays the value of scrollTop in the () {span _ demo element. innerHTML = outer element _ p. scrollTop; // read the scrollTop Value of "outer element" and display it.} Read the scrollTop value and display it (). // After the page is loaded, execute this function once. Displays the initial scrollTop value. The value is 0 script.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Explanation:
When you drag the scroll bar of the outer element, an onscroll event is generated. Register a processing function named "read scrollTop" for this event and display it.
In the event processing function that reads the scrollTop value and displays it, the current scrollTop Value of "outer element" is obtained through the outer element _ p. scrollTop and displayed on the page.
Use js Code to set scrollTop values
Make some modifications to the preceding demo. Add function: Use js statements to set scrollTop values
Example:
The text is displayed in the inner layer element.
The scrollTop value is:
Set scrollTop to 50 and set scrollTop to 500.
Enter the scrollTop value: OK
The complete original code of the demo instance above:

<P style = "width: 200px; height: 200px; background-color: #999999; overflow: auto;" id = "outer element A"> <p style = "width: 100px; height: 300px; background-color: # FFFF00; "id =" inner element A "> these texts are displayed in the inner layer elements. </P> <p> scrollTop value: </p> <button type = "button" onclick = "p _ outer Element. scrollTop = 50; "> set scrollTop to 50 </button> <button type =" button "onclick =" p _ outer Element. scrollTop = 500; "> set scrollTop to 500 </button> </p> <p> enter the value of scrollTop: <input type = "text" id = "input scrollTop value" value = ""/> <button type = "button" onclick = "set scrollTop value () "name =" set scrollTop value "> OK </button> </p> <script type =" text/javascript "> var p _ outer Element A = docum Ent. getElementById ("outer element A"); p _ outer Element A. onscroll = reads and displays the scrollTop value; // registers the onscroll event handler function. When you drag A scroll bar, the scrollTop value of the onscroll event var span _ outer element A is generated = document. getElementById ("scrollTop value of outer element A"); // The onscroll event handler function reads the scrollTop value and displays it () the scrollTop value of {span _ outer Element. innerHTML = p _ outer Element. scrollTop; // read the scrollTop Value of "outer element" and display it.} Read the scrollTop value and display it (). // After the page is loaded, execute this function once. Displays the initial scrollTop value. The value is 0 p _ outer Element. scrollTop = 10; // use js statements to set the scrollTop value. This statement triggers the onscroll event so that the function is executed once. Function sets the scrollTop value () {if (""! = Document. getElementById ("input scrollTop value "). value) p _ outer Element. scrollTop = document. getElementById ("input scrollTop value "). value; else alert ("enter a value");} script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Explanation:
The value assignment statement in the shape of p _ outer Element A. scrollTop = 12345; triggers the onscroll event so that the scrollTop value can be read and the function is executed once.
As mentioned in the previous example, when you drag the scroll bar to the bottom, scrollTop = 300px-200px = 100px, which is the maximum value that scrollTop can take. When a larger value is assigned to scrollTop, scrollTop automatically converts it to 100. For example, in the above "set scrollTop to 500" button, scrollTop will change 500 to 100.
Obtain the scrollTop of the body element.
The scrollTop of the body element is the height of the content that exceeds the "upper border of the browser window ".
When the HTML document header contains an animated document, use document.doc umentElement. scrollTop to get the correct value, and the document. body. scrollTop value is 0.

The Code is as follows: