1、之前我們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只讀”的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式 2、scrollTop/scrollLeft:滾動條捲去的高度/寬度（這兩個屬性是唯一“可讀寫”的屬性） bo ...
1、之前我們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只讀”的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式
2、scrollTop/scrollLeft:滾動條捲去的高度/寬度（這兩個屬性是唯一“可讀寫”的屬性）
box.scrollTop = 0 // 直接回到容器的頂部
我們的scrollTop的值是存在邊界值（最大和最小值），我們設置的值比最小值小或者比最大值大都沒用，起到效果的依然是邊界的值
[最小值是零]
box.scrollTop = -1000;// 直接回到了容器的頂部，沒有超出
console.log(box.scrollTop) //0
[最大值 = 真實的高度-當前容器一屏幕的高度]
var maxTop = box.scrollHeight - box.clientHeight;
scrollTop最經典的應用就是回到頂部，下麵代碼如下：
1、之前我們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只讀”的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式 2、scrollTop/scrollLeft:滾動條捲去的高度/寬度（這兩個屬性是唯一“可讀寫”的屬性） box.scrollTop = 0 // 直接回到容器的頂部 我們的scrollTop的值是存在邊界值（最大和最小值），我們設置的值比最小值小或者比最大值大都沒用，起到效果的依然是邊界的值 [最小值是零] box.scrollTop = -1000;// 直接回到了容器的頂部，沒有超出 console.log(box.scrollTop) //0 [最大值 = 真實的高度-當前容器一屏幕的高度] var maxTop = box.scrollHeight - box.clientHeight; scrollTop最經典的應用就是回到頂部，下麵代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } html,body{ width:100%; height:1000%; background:#11c900; } a{ text-decoration: none; color:#000; } </style> </head> <body> <a href="javascript:" id="goLink">GO</a> //A標簽本身是跳轉頁面的，把跳轉的地址寫在href這個屬性中 /* 1）、不寫值的話是刷新本頁面 2）、寫的如果是#target，是錨點定位，定位到當前頁面Id為target這個位置 3）、“javascript:”這樣寫是取消A標簽預設跳轉的行為 */ <script> var goLink =document.getElementById("goLink"); /* 回到頂部： 總時間（duration）:500ms 頻率（interval）：多長時間走一步 10ms 總距離(target): 當前的位置（當前的scrollTop）- 目標的位置(0) 步長(step)：每一次走得距離 (target/duration)*interval */ /* 這個代碼是可以優化的: 開始GO按鈕是不顯示的，當滾動到一定的距離之後，才顯示，反之隱藏 只要瀏覽器的滾動條在滾動，我們就需要判斷GO顯示還是隱藏 瀏覽器的滾動條滾動:拖動滾動條、滑鼠滾輪、鍵盤上下鍵、pageDown/pageUp鍵、點擊滾動條的空白區域或者箭頭（自主操作的行為）...我們還可以通過js控制scrollTop的值來實現滾動條的滾動 */ window.onscroll = function computedDisplay(){//不管怎麼操作的，只要滾動條動了就會觸發這個行為 var curTop = document.documentElement.scrollTop || document.body.scrollTop; var curHeight = document.documentElement.clientHeight || document.body.clientHeight; if(curTop>=clientHeight){ goLink.style.display = "block" }else{ goLink.style.display = "none" } } goLink.onclick = function(){ this.style.display = "none";//並不會消失，因為我們滾動條往回走的時候 又會觸發onscroll事件，又會進行顯示 window.onscroll = null; var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop; var step = (target/duration)*interval; var timer = window.setInterval(function(){ var curTop = document.documentElement.scrollTop || document.body.scrollTop; if(curTop===0){ window.clearInterval(timer); window.onscroll = computedDisplay; //當動畫結束後把對應的方法重新綁定給window.onscroll return; } curTop-=step document.documentElement.scrollTop = curTop; document.body.scrollTop = curTop; },interval) // document.documentElement.scrollTop = 0; // document.body.scrollTop = 0; } </script> </body> </html>
