回到頂部 · Javascript核心基礎

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; } html,body{ width:100%; height: 300%; background:-webkit-linear-gradient(top,yellow,orange,orangered); /* background:linear-gradient(top,yellow,orange,orangered) */ } a{ text-decoration:none; color:#000; } a:hover,a:active,a:target,a:visited{ text-decoration:none; color:#000; } #goLink{ display:block; position:fixed; bottom:150px; right:50px; width:100px; height:100px; line-height:100px; text-align:center; background:#fcfcfc; border-radius:50%; opacity:0.5; filter:alpha(opacity=50); display:none; } #goLink:hover{ opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <div id="target"></div>  <a href="voild:0" id="goLink">Top</a> <script> var goLink = document.getElementById("goLink"); //->回到頂部: //總時間(duration):500ms //頻率(interval):多長時間走一步 //總距離(target):當前的位置(當前的scrollTop值)-目標的位置(0) //->步長(step)：每一次走的距離 target/duration->每1ms走的距離*interval->每一次走的距離 var duration = 500,interval=10,target=document.documentElement.scrollTop||document.body.scrollTop; var step = (target/duration)*interval; goLink.onclick = function(){ //->點后后讓當前的go消失 this.style.display = "none"; window.onscroll = null; //->當點擊go的時候，首先把每一步要走的步長計算出來 var timer = window.setInterval(function(){ var curTop = document.documentElement.scrollTop||document.body.scrollTop; if(curTop === 0){ window.clearInterval(timer); window.onscroll = shouldDisplay; return; } curTop -= step; document.documentElement.scrollTop = curTop; document.body.scrollTop = curTop; },interval); } //->開始GO按鈕是不顯示的，只有當瀏覽器卷去的高度超過一屏幕的高度的時候才會顯示 // 只要瀏覽器的滾動條在滾動，我們就需要判斷GO顯示還是隱藏 //->瀏覽器滾動條滾動:拖動滾動條、鼠標滾輪、鍵盤上下鍵或則pageDown/pageUp鍵、點擊滾動條的空白處或則箭頭（自主操作的行為）...我們還可以通過JS控制scrollTop的值來實現滾動條的滾動 window.onscroll = shouldDisplay; function shouldDisplay(){ //->不管怎么操作的，只要滾動條動了就會觸發這個行為 var curTop = document.documentElement.scrollTop||document.body.scrollTop; var curHeight = document.documentElement.clientHeight||document.body.clientHeight; goLink.style.display = curTop>curHeight?"block":"none"; } //擴展 //左側樓層導航 //剛開始沒有樓層導航，只有當一樓出現在視野中的時候，樓層導航才顯示 //隨著頁面繼續滾動，每一個樓層到達某個區域的時候，我們讓樓層導航中的對影響跟著選中 //->當我們點擊樓層導航中的某一項的時候，可以實現一個簡單的動畫，實現定位到具體的樓層 </script> </body> </html> ```