js 滚动条自动滚动到最底部

简介:

        功能简介,js 滚动条自动滚动到最底部

效果展示:

核心代码:

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>

猜你喜欢

转载自blog.csdn.net/qq_36521848/article/details/130327325
今日推荐