On the scrolling position of jquery page scrolltop, scrollleft_jquery

Web pages are often larger than the browser window that displays the page, because Web documents have a lot of content, often resulting in pages that are taller than browsers and sometimes even wider, forcing visitors to scroll to view the entire page (as shown in Figure 10-8). When the visitor scrolls the page, some of the documents disappear from view. For example, a Web page cannot be fully placed in a browser window, the document will scroll left or up, so the top and left sides of the page will disappear into view. This means that the upper-left corner of the browser window is not the same as 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 if you just try to set the left and upper position of the element to 0, you'll get into trouble by actually just putting it at the top of the document, but it's outside the browser window.

Luckily, jquery provides two functions that allow you to determine how many portions of a page are scrolled from the top and left (in other words, how many pixels of a document exist in the top and left sides of the browser window). To determine how many parts of the document are above the browser window, use this line of code as shown below:

Copy Code code as follows:

$ (document). ScrollTop ()

To determine how much of the document is on the left side of the screen, use this line of code as follows:

Copy Code code as follows:

$ (document). ScrollLeft ()

Both functions return a pixel value that you can use to locate another element on the page. For example, if you want to position a pop-up window at the center of the page, even after someone scrolls down, you need to determine how far the visitor is scrolling and move the pop-up window so that a lot of the extra elements are underneath the page. In the example of a pop-up tool tip, when a visitor has scrolled down a page, to position the ToolTip, you need to be careful: it's easy to accidentally place ToolTips in the page space, but outside the viewport area of the browser. Use ScrollTop () to avoid placing a tooltip above the viewable area at the top of the browser window.

The above mentioned is the entire content of this article, I hope you can enjoy.