自动滚动到页面底部的实现

在前端开发中，有时需要将页面自动滚动到底部，比如聊天室、无限滚动列表等场景。本文将介绍两种实现方式，一种是使用原生 JavaScript，另一种是使用 jQuery。

使用原生 JavaScript 实现自动滚动到底部

我们可以通过以下代码实现：

function scrollToBottom() {
  window.scrollTo(0, document.body.scrollHeight);
}

scrollToBottom();

该函数中，window.scrollTo(x,y) 可以将窗口滚动到指定的坐标位置，而 document.body.scrollHeight 则是获取整个页面的高度，即可实现滚动到底部的效果。

使用 jQuery 实现自动滚动到底部

如果你正在使用 jQuery，那么可以使用以下代码实现：

function scrollToBottom() {
  $('html, body').animate({scrollTop: $(document).height()}, 'slow');
}

scrollToBottom();

在这个函数中，使用了 $('html, body').animate() 方法来平滑地滚动页面。其中 scrollTop 属性设置为 $(document).height() 可以将页面滚动到底部。

总结

在本文中，我们介绍了两种实现自动滚动到页面底部的方法：使用原生 JavaScript 和使用 jQuery。如果你正在使用 jQuery，可以考虑使用它的便利性；否则，可以选择使用原生 JavaScript，避免引入额外的库。无论哪种方法，都可以帮助你轻松实现自动滚动到页面底部的效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8984