快捷導(dǎo)航

js實(shí)現(xiàn)滾動條自動滾動到最底部示例代碼

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

這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)滾動條自動滾動到最底部的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

簡介：

功能簡介，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>

總結(jié)

到此這篇關(guān)于js實(shí)現(xiàn)滾動條自動滾動到最底部的文章就介紹到這了,更多相關(guān)js滾動條自動滾動最底部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

next.js之getStaticProps?getStaticPaths使用技巧解析
這篇文章主要為大家介紹了next.js之getStaticProps?getStaticPaths使用技巧解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
從理論角度討論JavaScript閉包
本文將介紹一個在JavaScript經(jīng)常會拿來討論的話題 —— 閉包（closure）。閉包其實(shí)已經(jīng)是個老生常談的話題了；有大量文章都介紹過閉包的內(nèi)容，盡管如此，這里還是要試著從理論角度來討論下閉包，看看ECMAScript中的閉包內(nèi)部究竟是如何工作的
2019-04-04
微信JSSDK調(diào)用微信掃一掃功能的方法
這篇文章主要為大家詳細(xì)介紹了微信JSSDK調(diào)用微信掃一掃功能的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
微信小程序?qū)崿F(xiàn)簽到彈窗動畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簽到彈窗動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
原型方法的不同寫法居然會影響調(diào)試的解決方法
原型方法的不同寫法居然會影響調(diào)試的解決方法...
2007-03-03
Node.js：Windows7下搭建的Node.js服務(wù)(來玩玩服務(wù)器端的javascript吧,這可不是前端js插件
什么是Node.js?還服務(wù)器端javascript?對于這個概念我在這篇文章不做解釋，可以自己去搜索了解下，服務(wù)器端js不是新技術(shù)，只是最近的node.js的火爆讓他爆發(fā)了，我會在以后的文章里解釋什么是node.js。
2011-06-06
微信小程序扭蛋抽獎機(jī)css3動畫實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序扭蛋抽獎機(jī)css3動畫實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
小程序animate動畫實(shí)現(xiàn)直播間點(diǎn)贊
這篇文章主要為大家詳細(xì)介紹了小程序animate動畫實(shí)現(xiàn)直播間點(diǎn)贊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
js分頁工具實(shí)例
這篇文章主要介紹了js分頁工具及其具體用法,包括js與css的詳細(xì)實(shí)現(xiàn)代碼與使用方法,需要的朋友可以參考下
2015-01-01
Bootstrap表單組件教程詳解
表單常見的元素主要包括：文本輸入框、下拉選擇框、單選框、復(fù)選框、文本域、按鈕等。接下來通過本文給大家介紹Bootstrap表單組件教程，感興趣的朋友一起學(xué)習(xí)吧
2016-04-04