获取固定 div 容器内元素的绝对位置

Question

我有一个页面列表和一个容器以及每个页面的 links 列表，我正在使用 animate() function of jquery to move to the desired page using the page's offset().top 值并且它第一次工作但是之后如果我单击另一个页面的 link offset().top 位置不一样并且它开始做奇怪的事情......

这是显示问题的代码片段

<html>
<head>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body style="margin: 0px; padding: 0px; background-color: #AFAFAF;">
 <div style="position: fixed; top: 0; left: 0; background-color: white; width: 100px; height: 120px; z-index: 99">
  <a href="#" onclick="goToPage(1);">Go to page 1</a><br>
  <a href="#" onclick="goToPage(2);">Go to page 2</a><br>
  <a href="#" onclick="goToPage(3);">Go to page 3</a><br>
  <a href="#" onclick="goToPage(4);">Go to page 4</a><br>
  <a href="#" onclick="goToPage(5);">Go to page 5</a><br>
  <a href="#" onclick="goToPage(6);">Go to page 6</a>
 </div>
 <div id="divContainer">
  <div id="fixedContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;">
   <div id="pageContainer"
    style="margin: 0 auto; height: 100%; max-width: 800px; position: relative; overflow-y: scroll; transition: all 0.3s ease-out 0s;">
    <div id="page1" style="position: relative; height: 1200px; background-color: lightblue;">
    </div>
    <div id="page2" style="position: relative; height: 1200px; background-color: lightcoral;">
    </div>
    <div id="page3" style="position: relative; height: 1200px; background-color: lightcyan;">
    </div>
    <div id="page4" style="position: relative; height: 1200px; background-color: lightgoldenrodyellow;">
    </div>
    <div id="page5" style="position: relative; height: 1200px; background-color: lightgray;">
    </div>
    <div id="page6" style="position: relative; height: 1200px; background-color: lightgreen;">
    </div>
   </div>
  </div>
 </div>
 <script>
  function goToPage(elementId) {
   $('#pageContainer').animate({
    scrollTop: $('#page' + elementId).offset().top
   }, 1200);
  }
 </script>
</body>
</html>

期望的结果是在页面之间无缝移动，不修改实际结构最好

Answer 1

您需要考虑 position() 而不是 offset() 并且您不应即时进行，而应在页面加载时进行一次。

您可以尝试如下：

$("#pageContainer > div").each(function() {
   $(this).attr("offset",$(this).position().top);
})

function goToPage(elementId) {
  $('#pageContainer').animate({
    scrollTop: $('#page' + elementId).attr('offset')
  }, 1200);
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>

<body style="margin: 0px; padding: 0px; background-color: #AFAFAF;">
  <div style="position: fixed; top: 0; left: 0; background-color: white; width: 100px; height: 120px; z-index: 99">
    <a href="#" onclick="goToPage(1);">Go to page 1</a><br>
    <a href="#" onclick="goToPage(2);">Go to page 2</a><br>
    <a href="#" onclick="goToPage(3);">Go to page 3</a><br>
    <a href="#" onclick="goToPage(4);">Go to page 4</a><br>
    <a href="#" onclick="goToPage(5);">Go to page 5</a><br>
    <a href="#" onclick="goToPage(6);">Go to page 6</a>
  </div>
  <div id="divContainer">
    <div id="fixedContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;">
      <div id="pageContainer" style="margin: 0 auto; height: 100%; max-width: 800px; position: relative; overflow-y: scroll; transition: all 0.3s ease-out 0s;">
        <div id="page1" style="position: relative; height: 1200px; background-color: lightblue;">
        </div>
        <div id="page2" style="position: relative; height: 1200px; background-color: lightcoral;">
        </div>
        <div id="page3" style="position: relative; height: 1200px; background-color: lightcyan;">
        </div>
        <div id="page4" style="position: relative; height: 1200px; background-color: lightgoldenrodyellow;">
        </div>
        <div id="page5" style="position: relative; height: 1200px; background-color: lightgray;">
        </div>
        <div id="page6" style="position: relative; height: 1200px; background-color: lightgreen;">
        </div>
      </div>
    </div>
  </div>
  <script>
  </script>
</body>

</html>

The .position() method allows us to retrieve the current position of an element (specifically its margin box) relative to the offset parent (specifically its padding box, which excludes margins and borders). Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful. ^ref

获取固定 div 容器内元素的绝对位置

Getting absolute position of elements inside fixed div container

html

javascript

css

jquery

jquery-ui