如何用JavaScript实现MVC视图加载时自动滚动到页面底部

嘿，这个需求很常见嘛！不管页面是通过GET还是POST请求加载的，用JavaScript实现自动滚到底部其实很简单，给你几个靠谱的方案：

这个方法会等页面所有资源（图片、样式表、字体啥的）都加载完成后再触发滚动，适合需要确保所有内容都渲染完毕的场景：

window.onload = function() {
  // 直接滚到最底部
  window.scrollTo(0, document.body.scrollHeight);
  
  // 如果想要顺滑的滚动效果（现代浏览器支持），可以换成这个：
  // window.scrollTo({
  //   top: document.body.scrollHeight,
  //   behavior: 'smooth'
  // });
};

如果你的页面主要是文本内容，不需要等图片加载完，只要DOM结构渲染好就滚动，用这个方法更高效：

document.addEventListener('DOMContentLoaded', function() {
  window.scrollTo(0, document.body.scrollHeight);
  
  // 同样支持顺滑滚动：
  // window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
});

不想搞事件监听？那就把脚本直接放在</body>标签的前面，页面渲染到这里时，内容已经基本就绪，直接执行滚动：

<script>
  // 立即执行滚动
  window.scrollTo(0, document.body.scrollHeight);
  
  // 顺滑版本：
  // window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
</script>
</body>

几个小提醒： #

• 为啥这些方案不管GET/POST都有效？因为它们都是页面加载完成后触发，不管请求方式是什么，只要页面能正常渲染出来，脚本就会执行。
• 如果页面有动态加载的内容（比如AJAX拉取的评论、列表），那得在动态内容加载完成后再调用一次window.scrollTo，不然滚动的位置可能不是最终的底部哦。
• 顺滑滚动的behavior: 'smooth'是现代浏览器支持的，如果要兼容旧版浏览器，去掉这个属性用普通滚动就好。

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