欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解原生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)畫(huà)幀請(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)文章

最新評(píng)論