js实现滚动条自动滚动到最底部示例代码

更新时间：2023年06月30日 09:19:04 作者：王家五哥

这篇文章主要给大家介绍了关于js实现滚动条自动滚动到最底部的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用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>

总结

到此这篇关于js实现滚动条自动滚动到最底部的文章就介绍到这了,更多相关js滚动条自动滚动最底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

你必须知道的Javascript知识点之"this指针"的应用
本篇文章小编为大家介绍，你必须知道的Javascript知识点之"this指针"的应用。需要的朋友参考下
2013-04-04
微信小程序使用canvas的画图操作示例
这篇文章主要介绍了微信小程序使用canvas的画图操作,结合实例形式较为详细的分析了微信小城序基于canvas的画图操作相关实现技巧与操作注意事项,需要的朋友可以参考下
2019-01-01
JavaScript实战之带收放动画效果的导航菜单
这篇文章主要为大家详细介绍了JavaScript实战之带收放动画效果的导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
JS 非图片动态loading效果实现代码
功能说明：譬如在按某个button时，显示消息"Loading”，然后每隔一秒后后面加上"."，至一定数量的"."时如："Loading..."，再重置此消息为"Loading"，继续动态显示，直至按钮事件处理完成。
2010-04-04
JS 实现 ajax 异步浏览器兼容问题
本文通过实例代码给大家讲解了js实现ajax异步浏览器兼容问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-01-01
小程序实现五星点评效果
这篇文章主要为大家详细介绍了小程序实现五星点评效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
javascript 可以拖动的DIV（二）
关于这个实现div拖动的js函数，实际上也是某位前辈公布于网上，这儿只是摘抄注解一下。
2009-06-06
JS继承定义与使用方法简单示例
这篇文章主要介绍了JS继承定义与使用方法,结合完整实例形式分析了JavaScript继承的基本定义、用法及操作注意事项,需要的朋友可以参考下
2020-02-02
JS常见构造模式实例对比分析
这篇文章主要介绍了JS常见构造模式,结合实例形式对比分析了工厂模式、构造函数模式、原型模式、寄生构造函数模式、稳妥构造函数模式等相关概念、原理、实现方法与相关操作技巧,需要的朋友可以参考下
2018-08-08
javascript实现动态统计图开发实例
这篇文章主要介绍了javascript实现动态统计图开发实例，需要的朋友可以参考下
2015-11-11