javascript - $(document).scrollTop() and $('#js_productWrap').offset().top of a certain div

Question

The difference between $(document).scrollTop() and $('#js_productWrap').offset().top of a certain p

Answer 1

When the document is longer than the computer screen, the browser can only view part of it, which is equivalent to a viewfinder. The distance from this frame to the top of the document is scrollTop

                 a document
         ^     +-----------+    ^
         |     |           |    |
         |     |           |    |scrollTop
         |     |           |    |
         |     |           |    |
offsetTop|     |  viewport |    |
         |  +-----------------+ v
         |  |  |           |  |
         v  |  +--+ #js_productWrap
            |  |  |        |  |
            |  +--+        |  |
            |  |           |  |
            +-----------------+
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               |           |
               +-----------+

Answer 2

$(document).scrollTop() returns the height of the current web page when it is scrolled;
$('#js_productWrap').offset().top returns the height of the target element from the top of the document