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

【问题标题】：Getting absolute position of elements inside fixed div container获取固定 div 容器内元素的绝对位置
【发布时间】：2020-06-18 17:31:30
【问题描述】：

我有一个页面列表和一个容器以及指向每个页面的链接列表，我正在使用 jquery 的animate() 函数使用页面的offset().top 值移动到所需的页面，它第一次工作但之后如果我单击另一个页面的链接，offset().top 位置不一样它开始做奇怪的事情......

这是显示问题的代码 sn-p

<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>

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

【问题讨论】：

标签： javascript html jquery css jquery-ui

【解决方案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>

.position() 方法允许我们检索元素的当前位置（特别是它的边距框）相对于偏移父级（特别是它的填充框，不包括边距和边框）。将此与 .offset() 进行对比，后者检索相对于文档的当前位置。当将一个新元素放置在另一个元素附近并且在同一个包含 DOM 元素中时，.position() 更有用。 ^ref

【讨论】：