Question

我有一个页面列表和一个容器，以及每个页面的链接列表，我正在使用jquery的animate()函数使用页面的offset().top值移动到所需页面，并且它第一次运行，但是在此之后，如果我单击另一个页面的链接，则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>

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

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

1 个答案: