js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部示例代碼
更新時(shí)間：2023年06月30日 09:19:04 作者：王家五哥
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
簡(jiǎn)介：
功能簡(jiǎn)介，js 滾動(dòng)條自動(dòng)滾動(dòng)到最底部
效果展示：
核心代碼：
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)滾動(dòng)條自動(dòng)滾動(dòng)到最底部的文章就介紹到這了,更多相關(guān)js滾動(dòng)條自動(dòng)滾動(dòng)最底部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
- 當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面底部自動(dòng)加載增加內(nèi)容的js代碼
- 基于javascript實(shí)現(xiàn)瀏覽器滾動(dòng)條快到底部時(shí)自動(dòng)加載數(shù)據(jù)
- 用js控件div的滾動(dòng)條,讓它在內(nèi)容更新時(shí)自動(dòng)滾到底部的實(shí)現(xiàn)方法
- JS如何設(shè)置滾動(dòng)屬性默認(rèn)自動(dòng)滾動(dòng)到底部(overflow:scroll;)
相關(guān)文章
你必須知道的Javascript知識(shí)點(diǎn)之"this指針"的應(yīng)用
本篇文章小編為大家介紹，你必須知道的Javascript知識(shí)點(diǎn)之"this指針"的應(yīng)用。需要的朋友參考下2013-04-04
這篇文章主要介紹了微信小程序使用canvas的畫(huà)圖操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了微信小城序基于canvas的畫(huà)圖操作相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-01-01
JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫(huà)效果的導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫(huà)效果的導(dǎo)航菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JS 非圖片動(dòng)態(tài)loading效果實(shí)現(xiàn)代碼
功能說(shuō)明：譬如在按某個(gè)button時(shí)，顯示消息"Loading”，然后每隔一秒后后面加上"."，至一定數(shù)量的"."時(shí)如："Loading..."，再重置此消息為"Loading"，繼續(xù)動(dòng)態(tài)顯示，直至按鈕事件處理完成。2010-04-04
JS 實(shí)現(xiàn) ajax 異步瀏覽器兼容問(wèn)題
本文通過(guò)實(shí)例代碼給大家講解了js實(shí)現(xiàn)ajax異步瀏覽器兼容問(wèn)題，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
關(guān)于這個(gè)實(shí)現(xiàn)div拖動(dòng)的js函數(shù)，實(shí)際上也是某位前輩公布于網(wǎng)上，這兒只是摘抄注解一下。2009-06-06
這篇文章主要介紹了JS繼承定義與使用方法,結(jié)合完整實(shí)例形式分析了JavaScript繼承的基本定義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
JS常見(jiàn)構(gòu)造模式實(shí)例對(duì)比分析
這篇文章主要介紹了JS常見(jiàn)構(gòu)造模式,結(jié)合實(shí)例形式對(duì)比分析了工廠模式、構(gòu)造函數(shù)模式、原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造函數(shù)模式等相關(guān)概念、原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
javascript實(shí)現(xiàn)動(dòng)態(tài)統(tǒng)計(jì)圖開(kāi)發(fā)實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)統(tǒng)計(jì)圖開(kāi)發(fā)實(shí)例，需要的朋友可以參考下2015-11-11