js實現(xiàn)滾動條自動滾動到最底部示例代碼
更新時間：2023年06月30日 09:19:04 作者：王家五哥
這篇文章主要給大家介紹了關(guān)于js實現(xiàn)滾動條自動滾動到最底部的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
簡介：
功能簡介，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實現(xiàn)滾動條自動滾動到最底部的文章就介紹到這了,更多相關(guān)js滾動條自動滾動最底部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
next.js之getStaticProps?getStaticPaths使用技巧解析
這篇文章主要為大家介紹了next.js之getStaticProps?getStaticPaths使用技巧解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
本文將介紹一個在JavaScript經(jīng)常會拿來討論的話題 —— 閉包（closure）。 閉包其實已經(jīng)是個老生常談的話題了； 有大量文章都介紹過閉包的內(nèi)容， 盡管如此，這里還是要試著從理論角度來討論下閉包， 看看ECMAScript中的閉包內(nèi)部究竟是如何工作的2019-04-04
這篇文章主要為大家詳細介紹了微信JSSDK調(diào)用微信掃一掃功能的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簽到彈窗動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
原型方法的不同寫法居然會影響調(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
這篇文章主要介紹了微信小程序 扭蛋抽獎機css3動畫實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了小程序animate動畫實現(xiàn)直播間點贊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了js分頁工具及其具體用法,包括js與css的詳細實現(xiàn)代碼與使用方法,需要的朋友可以參考下2015-01-01
表單常見的元素主要包括：文本輸入框、下拉選擇框、單選框、復(fù)選框、文本域、按鈕等。接下來通過本文給大家介紹Bootstrap表單組件教程，感興趣的朋友一起學(xué)習(xí)吧2016-04-04