首页 前端知识 js 滚动条自动滚动到最底部

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

2024-02-16 14:02:22 前端知识 前端哥 760 839 我要收藏

简介:

        功能简介,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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2187.html
标签
评论
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

jquery实现甘特图时效管理

2024-03-03 11:03:47

django之 echarts数据可视化

2024-03-03 11:03:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!