JavaScript 返回頂部實例

大家介紹如何通過 JS/CSS 實現網頁返回頂部效果。

CSS 按鈕樣式：

#myBtn {

display: none; /* 默認隱藏 */

position: fixed;

bottom: 20px;

right: 30px;

z-index: 99;

border: none;

outline: none;

background-color: red; /* 設置背景顏色，你可以設置自己想要的顏色或圖片 */

color: white; /* 文本顏色 */

cursor: pointer;

padding: 15px;

border-radius: 10px; /* 圓角 */

}

var topBtn = document.getElementById('top');
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
    // 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滾動超過一屏，返回頂部按鈕出現，反之隱藏
    if(toTop>=winHeight){
        topBtn.style.display = 'block';
    }else {
        topBtn.style.display = 'none';
    }
}
topBtn.onclick=function () {
    var timer = setInterval(function () {
        var toTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 判斷是否到達頂部，到達頂部停止滾動，沒到達頂部繼續滾動
        if(toTop == 0){
            clearInterval(timer);
        }else {
            // 設置滾動速度
            var speed = Math.ceil(toTop/5);
            // 頁面向上滾動
            document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
        }
    },50);
}

天發現index寫漏了一個功能，為了給用戶更好的體驗一般網站右邊都會提供一個返回頂部的按鈕，正常頁面載入時不顯示該按鈕，當我們往下移動網頁時這個按鈕就顯示出來了，點擊這個按鈕我們就可以快速的滾回到頂部位置（這里是滾動回去，2345中的是直接跳回頂部的，不怎么友好，而且返回按鈕一加載網頁就有了，都沒動何來的返回，這里明顯不合邏輯），我適當的改動了下，下面是功能演示。

首先我們還是來寫HTML代碼，還是模仿2345來做的，提供了2個按鈕：留言板和回頂部，這里我用的很簡單，直接用一個div包裹了2個a標簽，分別在a標簽中嵌套了一個圖標和文字內容（用到了i標簽和em標簽）。

<div class="Floating">
 <a href="javascript：;"><i class="fa fa-pencil-square"></i><em>留言板</em></a>
 <a href="javascript：;"><i class="fa fa-chevron-up"></i><em>回頂部</em></a>
</div>

接下來我們給DOM元素來寫樣式，寫樣式需要給點耐心，邊看邊調整，這樣才能獲取你想要的效果了，這里我用到的是position的fixed屬性：生成絕對定位的元素，相對于瀏覽器窗口進行定位（固定定位），然后給定一個z-index屬性讓他永遠放在其他元素上方。顏色切換我放在了a標簽，直接用：hover就可以實現，圖標和內容別忘了使用display: block;將其設置成塊級元素。

.Floating{
 width:65px;
 position: fixed;
 z-index:600;
 right:20px;
 bottom: 280px; 
}
.Floating a{
 text-decoration: none;
 margin-bottom: 5px;
 display: block;
 opacity: 0.9;
 background-color: rgb(130,130,130);
}
.Floating a:hover{
 background-color:#33AAFF;
}
.Floating a i{
 font-size: 24px;
}
.Floating a i,.Floating a em{
 padding:4px;
 width:56px;
 height:24px;
 text-align: center;
 color:rgb(253, 252, 252);
 z-index:5;
 cursor: pointer;
 font-style: normal;
 display: block;
}

這樣我們就得到如下圖所示的內容樣式了，當鼠標放上去的時候背景就變成了藍色選中狀態，移出時恢復背景色即可。前面說了當頁面載入時“回頂部”按鈕是隱藏的，當移動后方才顯示的，所里這里我們可以v-show或者v-if來控制按鈕的隱藏功能，這里我們定義了一個v-show="backFlag"，默認backFlag :false。

接下來我們就要開始給按鈕添加事件了，我給“回頂部”添加一個@click="backTop"事件，我們在methods中實現backTop這個方法，既然是通過滾動來觸發事件的，所以我們在頁面載入時就應該對頁面進行滾動監聽，并指定事件觸發時要執行的函數showBtn，這樣當我們滾動頁面的時候就對應的觸發了showBtn方法，當滿足條件時顯示“回頂部”按鈕。

 // window對象表示瀏覽器窗口，監聽滾動事件（所有瀏覽器都支持window對象）
 mounted () {
 window.addEventListener('scroll', this.showBtn) //scroll 滾動事件
 },
methods:{
 showBtn () { // 計算距離頂部的高度，當高度大于40顯示回頂部，小于40則隱藏（默認隱藏）
 /*獲取當前頁面滾動條縱坐標的位置
 IE9及以上：可以使用window.pageYOffset或者document.documentElement.scrollTop ，
 safari： window.pageYOffset 與document.body.scrollTop都可以
 Chrome：谷歌瀏覽器只認識document.body.scrollTop;*/
 let that = this
 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 that.scrollTop = scrollTop
 if (that.scrollTop > 40) {
 let that = this
 that.backFlag = true
 } else {
 that.backFlag = false
 }
}

這個應該很好理解吧，我把注釋都寫在代碼中了，主要思路就是獲取當前滾動條縱坐標的位置，當這個值大于40時就將backFlag改成true讓“回頂部”按鈕顯示出來即可，當當前滾動條縱坐標的位置小于40時再次隱藏“回頂部”按鈕。

接著給“回頂部”按鈕添加點擊事件，在methods:{}中實現backTop(）方法，這里為了有個移動的過程，我給事件添加了定時器，將當前滾動條的垂直位置減去每次移動的距離賦給當前滾動條縱坐標的位置，這樣就可以實現自動滾動的效果了，當移動到頂部時別忘了清除定時器（不然牛后面就沒法玩了，只要一移動就會自動滾回頂部了）。

 backTop(){ // 點擊返回頂部方法，計時器是為了過渡順滑
 let that = this
 let timer = setInterval(() => {
 let speed = Math.floor(-that.scrollTop /10) 
 //scrollTop獲取元素的滾動條的垂直位置，Math.floor() 向下取整
 document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + speed
 //document.documentElement.scrollTop 獲取當前頁面的滾動條縱坐標位置
 if (that.scrollTop === 0) {
 clearInterval(timer)
 }
 }, 20)
 },

最后別忘了銷毀監聽事件，使用destroyed ()方法調用銷毀監聽事件，這樣當我們離開這個頁面的時候，便會調用這個函數移除監聽，釋放內存，到這里我們的功能就全部實現了，是不是效果不錯，有興趣的可以試試。

在線咨詢

上一篇：JS中獲取元素屬性的8大方法
下一篇：HTML5崗位技能實訓室建設方案

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 返回頂部實例

您的項目需求