本文介绍如何使用 JavaScript 将页面或指定容器的滚动条自动滚动至最底部。核心方法为调用 window.scrollTo(0, document.body.scrollHeight)。文章提供了基于原生 JS 和 jQuery 的完整 HTML 示例，通过 setInterval 定时追加内容并触发滚动函数，实现聊天窗口等场景的自动跟随效果。
概述：
功能概述，利用 JavaScript 实现滚动条自动定位至页面底部
运行效果：
关键代码：
window.scrollTo(0, document.body.scrollHeight);代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="panel-body" style="flex-grow: 1; overflow-y: auto; background-color: #343541; color: white;">
</div>
<div style="position: sticky; bottom: 0;">
ceshi
</div>
<script>
setInterval(function() {
$(".panel-body").append("123456<br>" + new Date());
scrollBoxFun();
}, 100)
function scrollBoxFun() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>
</body>
</html>代码示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<div class="card" style="height: 100vh;">
<div class="panel-body" style="flex-grow: 1; overflow-y: auto; background-color: #343541; color: white;">
</div>
<div style="position: sticky; bottom: 0;">
ceshi
</div>
</div>
<script>
setInterval(function() {
$(".panel-body").append("123456<br>" + new Date());
scrollBoxFun();
}, 100)
function scrollBoxFun() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>
</body>
</html>结语
至此，关于 js 实现滚动条自动滚动到最底部的介绍完毕，更多相关 js 滚动条自动滚动最底部内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！