JQuery自动滚动异常：目标div2未触发滚动问题求助

问题原因 #

你使用的scrollIntoView()方法核心作用是让目标元素（#autoscroll）进入浏览器视口，它会自动向上滚动所有可滚动的祖先容器（包括页面本身），直到元素可见。这就是为什么主页面会滚动，而非你需要的div2。

前提条件 #

首先要确保div2具备可滚动的基础条件：

• 设置固定高度（比如height: 300px）
• 设置overflow-y: auto（或scroll），让内容超出容器高度时显示滚动条

解决方案 #

直接操作div2的滚动属性，让它自身滚动到底部，而非依赖scrollIntoView触发祖先容器滚动。

原生JavaScript实现 #

window.addEventListener('load', function() {
  const div2 = document.querySelector('#div2');
  // 将scrollTop设为容器的总滚动高度，直接滚动到底部
  div2.scrollTop = div2.scrollHeight;
});

jQuery实现 #

$(window).on('load', function() {
  const $div2 = $('#div2');
  $div2.scrollTop($div2[0].scrollHeight);
});

平滑滚动版本（原生JS） #

如果需要平滑滚动的效果，可以使用scrollTo方法：

window.addEventListener('load', function() {
  const div2 = document.querySelector('#div2');
  div2.scrollTo({
    top: div2.scrollHeight,
    behavior: 'smooth'
  });
});

完整可运行示例代码 #

<style>
#div2 {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
}
/* 模拟大量内容，让div2出现滚动条 */
#autoscroll {
  height: 1000px;
  background: #f5f5f5;
}
</style>

<div id="wrapper">
  <div id="div2">
    <div id="autoscroll"></div>
  </div>
</div>

<script>
window.addEventListener('load', function() {
  const div2 = document.querySelector('#div2');
  div2.scrollTop = div2.scrollHeight;
});
</script>

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