js——页面回到顶部
生活随笔
收集整理的這篇文章主要介紹了
js——页面回到顶部
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
很久都沒(méi)有去慕課網(wǎng)學(xué)習(xí)學(xué)習(xí)了，剛恰好就看見(jiàn)了一個(gè)用的比較多的小例子——頁(yè)面回到頂部，記得之前自己也是在初學(xué)web時(shí)，被這個(gè)坑了一回，因此今天特地拿來(lái)分享分享……
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>頁(yè)面回到頂部</title><link rel="stylesheet" type="text/css" href="mycss.css"><script type="text/javascript" src="myjs.js"></script> </head> <body><a href="javascript:;" id="btn" title="回到頂部"></a><div class="bg"><img src="images/tb_bg.jpg" alt="" /></div> </body> </html>其中需要引入自己寫(xiě)的一個(gè)樣式文件和一個(gè)js文件：
#btn {width: 40px;height: 40px;position: fixed;display: none;right: 65px;bottom: 10px;background: url(images/top_bg.png) no-repeat left top;}#btn:hover {background: url(images/top_bg.png) no-repeat 0 -39px;}.bg {width: 1190px;margin: 0 auto;}js文件：
//頁(yè)面加載完畢后觸發(fā) window.onload = function() {var obtn = document.getElementById('btn');var clientHeight=document.documentElement.clientHeight;//獲取頁(yè)面可視區(qū)域的高度var timer = null; //存放定時(shí)器var isTop=true;//滾動(dòng)條滾動(dòng)時(shí)觸發(fā)window.οnscrοll=function(){var osTop = document.documentElement.scrollTop || document.body.scrollTop;if(osTop>=clientHeight){obtn.style.display="block";}else{obtn.style.display="none";}if(!isTop){clearInterval(timer);}isTop=false;}obtn.onclick = function() {timer = setInterval(function() { //設(shè)置定時(shí)器//獲取滾動(dòng)條距離頂部的高度var osTop = document.documentElement.scrollTop || document.body.scrollTop;var ispeed=osTop/5;document.documentElement.scrollTop = document.body.scrollTop =osTop-ispeed;isTop=true;if(osTop==0){clearInterval(timer);}}, 30);} }文件存放路徑：
基本“回到頂部”效果就這樣子實(shí)現(xiàn)，只是我不會(huì)在文章中添加動(dòng)態(tài)效果（就是實(shí)時(shí)的添加這個(gè)動(dòng)態(tài)效果圖），求大神賜教！
總結(jié)
以上是生活随笔為你收集整理的js——页面回到顶部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JavaWeb开发环境配置
- 下一篇： codeforces 665B Shop