Introduction to scrollTop and scrollLeft_jquery

The explanation in the official documentation is a bit vague. In fact, it is easy to understand from another angle. scrollTop obtains internal elements that exceed the height of external containers. Example: $ (window ). scrollTop () obtains the height of the current page that exceeds the top end of the window. in the same way, the Web page is usually larger than the browser window that displays the page, because the Web document has a lot of content, the page is usually higher than the browser, and sometimes even wider, which forces visitors to scroll to view the entire page (10-8 ). When a visitor scrolls the page, some documents disappear from sight. For example, if a Web page cannot be completely placed in a browser window, the document will scroll left or up. Therefore, the top and left of the page will disappear from the field of view. This means that the upper left corner of the browser window is different from the upper left corner of the document. If you try to place a new element, such as a dynamic Banner at the top of the screen, and try to set the left and top positions of the element to 0, it will be troublesome, you actually just put it at the top of the document, but it is located outside the browser window.

Fortunately, jQuery provides two functions that allow you to determine the number of pages to scroll from the top and left (in other words, the number of pixels of the document exists on the top and left of the browser window ). To determine the part of the document above the browser window, use the following line of code:

The code is as follows:

$ (Document). scrollTop ()

To determine how many parts of the document are on the left of the screen, use the following line of code:

The code is as follows:

$ (Document). scrollLeft ()

Both functions return a pixel value, which you can use to locate another element on the page. For example, if you want to locate a pop-up window in the center of the page, even after someone scrolls down, you need to determine how far the visitor is rolling and move the pop-up window, so that many additional elements are located at the bottom of the page. In the example of a tool prompt popped up, when a visitor has scroll down a page and wants to locate the tool prompt, you need to be careful: it is easy to accidentally put the tool prompt into the page space, however, it is visible outside the browser's viewport. Use scrollTop () to avoid placing a tooltip above the visible area at the top of the browser window.

The above is all the content of this article. I hope you will like it.