詳解原生JS回到頂部
更新時(shí)間：2019年03月25日 14:34:30 作者：LPANGFEI
這篇文章主要介紹了JS回到頂部，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
第一次知道可以用超鏈接（錨點(diǎn)）實(shí)現(xiàn)回到頂部的時(shí)候我是很震驚的，想著原來(lái)可以這么簡(jiǎn)單?。〉亲鳛橐粋€(gè)正在學(xué)習(xí)JS的小白，不能就這么輕易止步，所以查資料自己整了一個(gè)JS的回到頂部。
HTML代碼：
<div class="container"> <p>你好哇</p> ... </div> <div id="top">回到頂部</div>
CSS代碼：
.container{
border: 1px solid black;
}
#top{
position: fixed;
padding: 10px;
width: 20px;
border: 1px solid black;
box-shadow: 0 0 2px #333;
right: 20px;
bottom: 20px;
}
#top:hover{
cursor: pointer;
}
JS代碼：
//創(chuàng)建變量
var scroll_Top = document.getElementById('top');
//用最常用的scrollTop屬性實(shí)現(xiàn)
var timer = null;
function scrollTop(){
// 取消一個(gè)通過(guò)調(diào)用requestAnimationFrame()方法添加到計(jì)劃中的動(dòng)畫幀請(qǐng)求.
cancelAnimationFrame(timer);
/* requestAnimationFrame 會(huì)把每一幀中的所有DOM操作集中起來(lái)，
在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率
一般來(lái)說(shuō)，這個(gè)頻率為每秒60幀。 */
timer = requestAnimationFrame(function sTop(){
var top = document.body.scrollTop || document.documentElement.scrollTop;
if(top > 0){
//使用定時(shí)器，將scrollTop的值每次減少20（自行設(shè)置），直到減少到0，則滾動(dòng)完畢
document.body.scrollTop = document.documentElement.scrollTop = top - 20;
timer = requestAnimationFrame(sTop);
}else{
cancelAnimationFrame(timer);
}
});
}
scroll_Top.addEventListener('click', scrollTop, false);
效果手動(dòng)截圖：
以上所述是小編給大家介紹的JS回到頂部詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript 內(nèi)置對(duì)象及常見(jiàn)API詳細(xì)介紹
這篇文章主要介紹了javascript 內(nèi)置對(duì)象及常見(jiàn)API的相關(guān)資料,這里對(duì)內(nèi)置對(duì)象進(jìn)行了詳細(xì)的整理，需要的朋友可以參考下2016-11-11
javascript indexOf函數(shù)使用說(shuō)明
JavaScript中indexOf函數(shù)方法是返回 String 對(duì)象內(nèi)第一次出現(xiàn)子字符串的字符位置。2008-07-07
詳解JavaScript中基于原型prototype的繼承特性
這篇文章主要介紹了詳解JavaScript中基于原型prototype的繼承特性,JavaScript中缺少類等面向?qū)ο蟮闹匾匦?因而談到繼承也顯得十分古怪...需要的朋友可以參考下2016-05-05
詳解JavaScript中的客戶端消息框架設(shè)計(jì)原理
這篇文章主要介紹了詳解JavaScript中的客戶端消息框架設(shè)計(jì)原理,包括客戶端和服務(wù)器端的通信等方面的內(nèi)容,需要的朋友可以參考下2015-06-06
JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的客戶端腳本語(yǔ)言。JavaScript最初的設(shè)計(jì)是為了檢驗(yàn)HTML表單輸入的正確性。javaScript起源于Netscape公司的LiveScript語(yǔ)言。2009-08-08
這篇文章主要介紹了JavaScript 為什么要有 Symbol 類型，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要簡(jiǎn)單介紹了Unicode與JavaScript的發(fā)展史的相關(guān)資料,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript中的表單驗(yàn)證,是JS在前端和服務(wù)器端通信部分相關(guān)的重要知識(shí),需要的朋友可以參考下2015-06-06
Javascript 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別
這篇文章主要介紹了Javascript 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-11-11
一起來(lái)看看js對(duì)象和事件的學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了js對(duì)象和事件學(xué)習(xí)筆記，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02