JS点击按钮滚动到嵌套div内指定元素失败，如何解决？

我明白你遇到的困扰了——想让带overflow-y:auto的滚动容器滚动到指定元素，但动画代码没生效，还不能修改容器的CSS样式。咱们来一步步搞定它！

问题根源 #

你原来的代码里用了$('.temp-class').offset().top，这个值是元素相对于整个文档顶部的距离，但你的滚动容器.m-portlet-no-bdr本身是独立的滚动区域，用这个值计算会出现偏差。正确的做法应该是获取元素相对于滚动容器内部的顶部距离。

修正后的代码 #

我们可以用jQuery的position().top来获取元素相对于父容器的偏移量，再结合容器当前的滚动状态，就能准确计算出需要滚动到的位置：

// 绑定按钮点击事件（根据你的实际按钮选择器调整）
$('button').on('click', function() {
  const $scrollContainer = $('.m-portlet-no-bdr');
  const $targetElement = $('.temp-class');
  
  // 获取目标元素相对于滚动容器的顶部偏移量
  const targetPosition = $targetElement.position().top;
  
  // 执行平滑滚动动画
  $scrollContainer.animate({
    scrollTop: targetPosition
  }, 500); // 500是动画毫秒时长，可按需调整
});

为什么这样有效？ #

• position().top会返回目标元素相对于最近的定位父元素（这里就是.m-portlet-no-bdr）的顶部距离，正好是滚动容器内部需要滚动的精准距离。
• 不需要额外叠加容器的scrollTop()值，因为animate的scrollTop参数直接接受相对于容器顶部的目标位置值。

特殊情况处理 #

如果你的滚动容器存在padding-top内边距，记得把内边距值也加入计算，避免定位偏移：

const containerPaddingTop = parseInt($scrollContainer.css('padding-top'));
const targetPosition = $targetElement.position().top + containerPaddingTop;

完整可测试示例 #

你可以用下面的代码直接验证效果：

<body>
  <button>点击滚动到目标元素</button>
  <div class="m-portlet m-portlet-no-bdr">
    <div class="abc">占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br></div>
    <div class="abc">占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br></div>
    <div class="abc">占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br></div>
    <div class="temp-class">我是要滚动到的目标元素！</div>
    <div class="abc">占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br></div>
    <div class="abc">占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br>占位内容<br></div>
  </div>

  <style>
    .m-portlet-no-bdr {
      min-height: calc(100vh - 130px);
      overflow-y: auto;
      max-height: calc(100vh - 172px);
      overflow-x: hidden;
      border: 1px solid #ddd; /* 加边框方便查看容器范围 */
    }
    .abc {
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
    }
    .temp-class {
      padding: 20px;
      background-color: #f5f5f5;
      font-weight: bold;
    }
  </style>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $('button').on('click', function() {
      const $scrollContainer = $('.m-portlet-no-bdr');
      const $targetElement = $('.temp-class');
      const targetPosition = $targetElement.position().top;
      
      $scrollContainer.animate({
        scrollTop: targetPosition
      }, 500);
    });
  </script>
</body>

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