一個(gè)網(wǎng)頁(yè)內(nèi)容一多, 就會(huì)分屏顯示數(shù)據(jù), 如果屏目很多, 用戶訪問(wèn)的數(shù)據(jù)已經(jīng)到了頁(yè)面的底部, 這時(shí)候返回到頂部也是需要一點(diǎn)時(shí)間. 這樣對(duì)用戶體驗(yàn)來(lái)說(shuō), 可能就稍微遜了一點(diǎn). 所以頁(yè)面數(shù)據(jù)多的網(wǎng)頁(yè), 現(xiàn)在都會(huì)用一個(gè)"返回頂部"按鈕來(lái)快速跳轉(zhuǎn)到網(wǎng)頁(yè)的頂部.
那現(xiàn)在我們就來(lái)實(shí)現(xiàn)這么一個(gè)功能.

這個(gè)頁(yè)面我們就不寫(xiě)什么數(shù)據(jù), 直接就加入一個(gè)a標(biāo)簽來(lái)作為返回頂部的按鈕, 并給他一個(gè)class名稱:top.

<a href="#" class="top">頂部</a>

然后設(shè)置其樣式表:

body {
  height: 3000px;
}

.top {
  position: absolute;
  top: 120px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  text-align: center;
  background-color: #666666;
  color: #ffffff;
  right: 10px;
  transition: all 0.3s;
   visibility: hidden;
}
.top:hover {
  background-color: #ff3300;
}

這里body設(shè)定為3000的高度, 主要是讓頁(yè)面有滾動(dòng)的效果. 按鈕一般都是放在網(wǎng)頁(yè)的右邊靠下一點(diǎn)的位置. 這里我們通過(guò)position來(lái)設(shè)置.

我們還要分析一下, 當(dāng)用戶的訪問(wèn)的網(wǎng)頁(yè)在頁(yè)面的頂部時(shí), 這個(gè)按鈕肯定是不顯示的. 所以我們這里用了visibility來(lái)控制按鈕的顯示與否.

界面很簡(jiǎn)單, 我們就先將就一下. 下面來(lái)分析JS的實(shí)現(xiàn).

首先這個(gè)按鈕是在整個(gè)網(wǎng)頁(yè)的效果上, 因此監(jiān)聽(tīng)滾動(dòng)事件需要設(shè)置在整個(gè)窗口上. 因此,我們給window設(shè)置一個(gè)onscroll事件.

window.onscroll = function (e) {...}

在這個(gè)事件里我們來(lái)控制返回頂部按鈕的上下位置, 和是否顯示. 首先來(lái)完成上下位置的控制.

上下位置的控制, 我們肯定得計(jì)算scrollTop的高度, 以及網(wǎng)頁(yè)單屏顯示的高度. 當(dāng)用戶進(jìn)入頁(yè)面的時(shí)候, 我們默認(rèn)給這個(gè)按鈕放置在頁(yè)面右中部位置. 這時(shí)候的計(jì)算是:

var n_half_height = window.screen.height / 2;

將這個(gè)值賦給按鈕的top屬性.

然后如果用戶滾動(dòng)的時(shí)候, 位置肯定是保持不變的, 這時(shí)候的計(jì)算應(yīng)該是

var n_stop = e.target.scrollingElement.scrollTop; //獲取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

這是e 對(duì)象是onsroll里的參數(shù)event. 這里我使用的是谷歌瀏覽器.其他瀏覽器未測(cè)試. 如果需要兼容, 大家可以處理一下.
每滾動(dòng)都得計(jì)算其高度, 所以這個(gè)應(yīng)該是放入在onscroll事件中.然后,將這個(gè)值賦給按鈕的top屬性.

當(dāng)然不要忘記一件事, 就是scrollTop為0的時(shí)候, 按鈕不需要顯示. 大于0的時(shí)候, 得讓按鈕顯示. 前面講過(guò)我們用visibility這個(gè)屬性來(lái)控制的.這樣代碼就完整了.
Javascript完整代碼

var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
 var n_stop = e.target.scrollingElement.scrollTop;
 if (n_stop === 0 ) {
  ele_top.style.visibility = "hidden";
 }else {
  ele_top.style.visibility = "visible";
 }
 var n_top = n_stop + n_half_height ;
 ele_top.style.top = n_top + "px";
}

最后的效果展示：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論