回到頂部小例子

時間 2019-11-08

原文原文鏈接

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>回到頂部</title> <!-- CSS --> <style> * { margin: 0; padding: 0; } html, body { height: 1000%; /* CSS3中的背景顏色線性漸變 */ background: -webkit-linear-gradient(top left, lightblue, lightpink, lightyellow); } .link { display: none; position: fixed; right: 30px; bottom: 230px; box-sizing: border-box; width: 100px; height: 100px; background: lightcoral; font-size: 16px; color: #000; text-decoration: none; text-align: center; line-height: 100px; } </style> </head> <body> <a href="javascript:;" id="link" class="link">回到頂部</a> <!-- JS --> <script> let HTML = document.documentElement, LINK = document.getElementById('link'); // 1.當瀏覽器滾動條滾動的時候，咱們進行驗證：捲去的高度超過兩屏，咱們讓#LINK顯示 function check() { //winH:一屏幕高度 scrollT:捲去的高度 let winH = HTML.clientHeight, scrollT = HTML.scrollTop; LINK.style.display = scrollT >= winH * 2 ? 'block' : 'none'; } window.onscroll = check; // 2.點擊回到頂部 LINK.onclick = function () { /* 讓按鈕隱藏 */ LINK.style.display = 'none'; //先禁止滾動事件觸發（由於在回到頂部的運動過程當中，若是事件一直在，會計算按鈕顯示隱藏的樣式，沒法讓按鈕隱藏） window.onscroll = null; /* 實現動畫 */ let step = 1000; let timer = setInterval(() => { //每一次獲取最新的SCROLL-TOP值，在現有的基礎上減去步長，讓其走一步 let curT = HTML.scrollTop; if (curT === 0) { //邊界判斷：已經回到頂部後，咱們清除定時器 clearInterval(timer); //恢復滾動條滾動的監聽事件 window.onscroll = check; return; } curT -= step; HTML.scrollTop = curT; }, 17); }; //SET-INTERVAL：設置一個定時器（TIMER表明這個定時器），每間隔INTERVAL這麼久，就會把FUNCTUION執行一次...一直到手動清除定時器爲止 // let timer = setInterval([FUNCTUION], [INTERVAL]); // clearInterval(timer); </script> </body> </html> 複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。