如何在可滚动div中实现锚点滚动动画？代码故障排查

嘿，我来帮你搞定这两个滚动锚点的问题！

问题1：如何在可滚动div中实现滚动到目标元素的动画效果？ #

实现这个效果的核心逻辑很清晰：

• 监听锚点按钮的点击事件，阻止默认跳转行为
• 计算目标元素相对于滚动容器的顶部偏移量（而不是整个文档）
• 利用jQuery的animate()方法修改滚动容器的scrollTop属性，添加平滑过渡动画

具体实现我会在问题2的修复方案里详细展示，你的代码已经接近正确，只需要调整偏移量的计算方式就行。

问题2：修复你的多锚点滚动代码 #

你的代码在html/body上能正常工作，是因为html/body的scrollTop是相对于整个文档的，而你用的offset().top正好是元素相对于文档的位置。但换到自定义滚动容器.results时，就需要计算元素相对于这个容器的位置——这就是代码失效的核心原因！

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .results {
      width: 300px;
      height: 500px;
      margin-top: 20px;
      overflow-y: scroll;
      /* 可选：添加relative定位，方便用position()计算偏移 */
      position: relative;
    }
    .btnpins a {
      margin-right: 10px;
      text-decoration: none;
      color: #333;
    }
    .btnpins a.focus {
      color: blue;
      font-weight: bold;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div class="btnpins">
    <a href="#result1">Pin 1</a>
    <a href="#result2">Pin 2</a>
    <a href="#result3">Pin 3</a>
    <a href="#result4" class="focus">Pin 4</a>
  </div>
  <div class="results">
    <div class="resultin" id="result1">
      <h5>Result 1</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <hr>
    </div>
    <div class="resultin" id="result2">
      <h5>Result 2</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <hr>
    </div>
    <div class="resultin" id="result3">
      <h5>Result 3</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <hr>
    </div>
    <div class="resultin" id="result4">
      <h5>Result 4</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <hr>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('.btnpins a').click(function(e) {
        e.preventDefault();
        const $container = $('.results');
        const $target = $($(this).attr('href'));
        
        // 方法1：用offset计算（无需给容器加position）
        const targetRelativeTop = $target.offset().top - $container.offset().top;
        
        // 方法2：若容器加了position: relative，可直接用position()
        // const targetRelativeTop = $target.position().top;
        
        $container.stop().animate({
          scrollTop: targetRelativeTop - 60 // 减去60偏移，避免内容被遮挡
        }, 400);
        return false;
      });
    });
  </script>
</body>
</html>

关键修改点说明 #

1. 偏移量计算修正：把原来的$($(this).attr('href')).offset().top改成$target.offset().top - $container.offset().top，这样得到的是目标元素相对于滚动容器.results的顶部距离，这才是scrollTop需要的正确值。
2. 可选容器定位：给.results添加position: relative后，可以直接用$target.position().top获取相对位置，代码更简洁。
3. 变量复用优化：把容器和目标元素存为变量，让代码更清晰易维护。

这样修改后，点击锚点按钮就能平滑滚动到.results容器内对应的目标元素了！

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