js學習總結----瀏覽器滾動條捲去的高度scrolltop

時間 2019-12-02

標籤學習總結瀏覽器滾動條高度 scrolltop 欄目 JavaScript 简体版

原文原文鏈接

一、以前咱們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是「只讀」的屬性-> 只能經過屬性獲取值，不能經過屬性修改元素的樣式javascript

二、scrollTop/scrollLeft:滾動條捲去的高度/寬度（這兩個屬性是惟一「可讀寫」的屬性）html

　　box.scrollTop = 0 // 直接回到容器的頂部java

　　咱們的scrollTop的值是存在邊界值（最大和最小值），咱們設置的值比最小值小或者比最大值大都沒用，起到效果的依然是邊界的值瀏覽器

　　[最小值是零]學習

　　box.scrollTop = -1000;// 直接回到了容器的頂部，沒有超出優化

　　console.log(box.scrollTop) //0動畫

　　[最大值 = 真實的高度-當前容器一屏幕的高度]this

　　var maxTop = box.scrollHeight - box.clientHeight;spa

　　scrollTop最經典的應用就是回到頂部，下面代碼以下：　　　code

一、以前咱們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是「只讀」的屬性-> 只能經過屬性獲取值，不能經過屬性修改元素的樣式

二、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>