1. 實現思路
首先在實現這個效果之前 先來描述一下這個效果
A) 返回頂部的按鈕 一般會在屏幕的第二屏才會出現。 所以我們需要來判斷是否到達第二屏。
B) 其次 鼠標移動上去會顯示返回頂部的字樣
C) 點擊 返回按鈕之后 會以慢慢返回上面 不會勻速
2. HTML 和 CSS
首先 div 表示中間頁面部分 a就是一個返回頂部的按鈕 固定定位在右下方。 第一屏的時候不會顯示 在第二屏才會顯示 使用hover 來 顯示上面的說明字
按鈕 默認 40 * 40 的 把鼠標移動上去之后 就會顯示下面的 40部分。
3. js部分
首先我們獲取到 滾動條到頂部的高度。那我們怎么控制它的高度 。我們可以直接給它賦值 就是一個數字 這樣會滾動條識別到這個數字之后就會滾動到相應的位子。
怎么賦值？ 很簡單
這樣滾動條就會到 距離頂部200px 的位置 我們只要一直減小這個高度值 直到0 不就可以使滾動條返回頂部嗎
所以 我們讓他慢慢變小。 我們還需要一個 定時器 來 執行。 每隔多少時間 來減少到頂部的距離
當 距離為0 的時候 就清除定時器。 這里就完成了返回頂部的大部分代碼。接下來 實現 滾動到第二屏顯示返回頂部的 按鈕
5. 滾動到第二屏時 顯示返回頂部按鈕
window.onscroll = function(){};
我們需要獲取距離頂部的距離 還有當前可視區域的高度。做一下判斷就可以。
