滚动容器内锚点菜单平滑跳转异常问题排查求助

问题场景 #

用jQuery实现菜单项到锚点的平滑过渡动画，初始可见的菜单项跳转功能正常，但需滚动才能看到的菜单项跳转行为异常（需在小代码片段中运行，而非全屏展开才能复现问题）。

原代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>header</header>
<main>
  <div class="main-nav">
    <a href="#one">1. One</a>
    <a href="#two">2. Two</a>
    <a href="#three">3. Three</a>
    <a href="#four">4. Four</a>
    <a href="#five">5. Five</a>
    <a href="#six">6. Six</a>
    <a href="#seven">7. Seven</a>
    <a href="#eight">8. Eight</a>
    <a href="#nine">9. Nine</a>
  </div>
  <div class="content" id="one">One</div>
  <div class="content" id="two">Two</div>
  <div class="content" id="three">Three</div>
  <div class="content" id="four">Four</div>
  <div class="content" id="five">Five</div>
  <div class="content" id="six">Six</div>
  <div class="content" id="seven">Seven</div>
  <div class="content" id="eight">Eight</div>
  <div class="content" id="nine">Nine</div>
</main>
<footer>footer</footer>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  font-size: 16px;
}
header, footer {
  height: 20vh;
  border: 1px solid maroon;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  height: 60vh;
  overflow: auto;
  padding: 20px;
}
.main-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.main-nav a {
  padding: 5px 0;
}
.content {
  padding: 20px;
  color: white;
  height: 100vh;
}
#one, #four, #seven {
  background-color: red;
}
#two, #five, #eight {
  background-color: green;
}
#three, #six, #nine {
  background-color: blue;
}

原JS代码（存在问题）

$('.main-nav a').on('click',function(e){
  e.preventDefault();
  let elementClick = $(this).attr('href');
  let destination = $(elementClick).offset().top - $(elementClick).parent().offset().top - $(elementClick).parent().scrollTop();
  $('main').animate({ scrollTop: destination }, 1000);
});

问题原因 #

原代码中destination的计算逻辑错误，没有正确锚定滚动容器（main）内的相对位置。当main已经滚动过一段距离后，offset().top获取的是元素相对于文档的位置，再减去父容器的偏移和滚动值，会导致计算结果出现偏差，无法准确定位到目标锚点。

修复方案 #

替换JS代码为以下内容：

$('.main-nav a').on('click',function(e){
  e.preventDefault();
  const targetId = $(this).attr('href');
  const $target = $(targetId);
  const $scrollContainer = $('main');
  // 计算目标元素相对于滚动容器的顶部偏移，减去容器的内边距
  const destination = $target.position().top - parseInt($scrollContainer.css('padding-top'));
  $scrollContainer.animate({ scrollTop: destination }, 1000);
});

修复说明 #

• 使用position().top获取目标元素相对于滚动容器（main）的顶部偏移，该值基于容器的当前滚动状态，能准确反映元素在容器内的实际位置。
• 减去main的padding-top是因为容器的内边距会占据滚动内容的顶部空间，排除这部分偏移后，目标元素才能准确对齐容器顶部。

内容的提问来源于stack exchange，提问作者Danila