首頁 > 開發者 > JavaScript
標籤：
html檔案代碼：
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script></head><body> <div class="box"> <img src="bg.png"> </div> <a href="javascript:;" id="btn" title="回到頂部"></a></body></html>
css檔案代碼：
.box{ width: 999px; margin: 0 auto;}#btn{ width: 40px; height: 40px; display: none; /*預設不顯示回到頂部表徵圖*/ position: fixed; left: 50%; margin-left: 470px; bottom: 30px; background:url(back_top.png) no-repeat left top;/*背景圖的位置是從元素的左上方開始顯示*/}#btn:hover{ background:url(back_top.png) no-repeat left -40px; /*滑鼠放到回到頂部連結時改變的樣式}
回到頂端表徵圖：
JS檔案代碼：
//頁面渲染完觸發window.onload = function(){ var obtn = document.getElementById(‘btn‘); var clientHeight = document.documentElement.clientHeight;//擷取內容可視地區高度（視口高度） var timer = null; //捲軸滾動時觸發 window.onscroll = function(){ var osTop = document.documentElement.scrollTop||document.body.scrollTop;//擷取捲軸垂直位移，後半部分為相容Google瀏覽器 //當捲軸垂直位移大於等於視口高度時顯示回到頂端表徵圖 if (osTop >= clientHeight) { obtn.style.display = ‘block‘; }else{ obtn.style.display = ‘none‘; }; } obtn.onclick = function(){ //點擊事件 timer = setInterval(function(){ var osTop = document.documentElement.scrollTop||document.body.scrollTop;//相容Google var ispeed = Math.floor(-osTop / 5); //若不是整數，向下舍入 document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;//回到頂端的速度不斷減緩 if (osTop == 0) { clearInterval(timer); //回到頂端時清除計時器 }; },30); }}
效果：
1、不顯示回到頂端表徵圖
2、當捲軸滾動垂直位移大於視口高度出現回到頂端表徵圖
3、滑鼠移入表徵圖改變，點擊後回到頂部
Javascript 實現回到頂部效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
