回到頂部的寫法

時間 2019-11-09

原文原文鏈接

【1】錨點spa

　　使用錨點連接是一種簡單的返回頂部的功能實現。該實現主要在頁面頂部放置一個指定名稱的錨點連接，而後在頁面下方放置一個返回到該錨點的連接，用戶點擊該連接便可返回到該錨點所在的頂部位置code

<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到頂部</a>
</body>

　scrollTop屬性表示被隱藏在內容區域上方的像素數。元素未滾動時，scrollTop的值爲0，若是元素被垂直滾動了，scrollTop的值大於0，且表示元素上方不可見內容的像素寬度blog

　　因爲scrollTop是可寫的，能夠利用scrollTop來實現回到頂部的功能ip

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
    <script>
        test.onclick = function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    </script>
</body>

scrollTo(x,y)方法滾動當前window中顯示的文檔，讓文檔中由座標x和y指定的點位於顯示區域的左上角文檔

　　設置scrollTo(0,0)能夠實現回到頂部的效果it

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
    <script>
        test.onclick = function(){
            scrollTo(0,0);
        }
    </script>
</body>

謝謝你們io

相關標籤/搜索

每日一句

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