我們在網頁中應該經常可以看到回到頂部這個功能，這個功能也比較簡單。那么，我就來記錄下自己所知道的方法。

使用scrollTop實現

首先，來簡單概括下使用這個方式實現 回到頂部 功能的原理。

根據網頁的滾動高度，判斷是否顯示回到頂部按鈕。

點擊按鈕時，觸發回到頂部事件，追求視覺效果的話，可以加入一個定時器。

思路理完之后就是如何用代碼實現了

回到頂部

export default {

mounted() {

window.addEventListener("scroll",this.showbtn,true);

},

methods: {

// 顯示回到頂部按鈕

showbtn(){

let that = this;

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

that.scrollTop = scrollTop

},

/**

* 回到頂部功能實現過程：

* 1. 獲取頁面當前距離頂部的滾動距離(雖然IE不常用了，但還是需要考慮一下兼容性的)

* 2. 計算出每次向上移動的距離，用負的滾動距離除以5，因為滾動的距離是一個正數，想向上移動就是做一個減法

* 3. 用當前距離加上計算出的距離，然后賦值給當前距離，就可以達到向上移動的效果

* 4. 最后記得在移動到頂部時，清除定時器

*/

backtop(){

var timer = setInterval(function(){

let osTop = document.documentElement.scrollTop || document.body.scrollTop;

let ispeed = Math.floor(-osTop / 5);

document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;

this.isTop = true;

if(osTop === 0){

clearInterval(timer);

}

},30)

}

}

}

使用錨點實現

這個方法就比較古老又簡陋了，還是在大學時期，剛接觸到前端時，老師教過的錨點。

標簽是一個很神奇的標簽，使用這個標簽可以達到返回頂部的效果，但是比較生硬，沒有任何過渡效果。

回到頂部 // 這個方法就是為 href 賦值，實現功能

使用 jQuery 實現

能使用原生JS實現的也就能使用jquery實現，只不過我認為為了實現一個小功能，再引入一個框架有點不劃算，但如果你是使用jquery寫的項目，就可以使用以下的方法實現。

回到頂部

function backtop(minHeight){

// 獲取頁面最小高度，如果沒有傳入值就默認600

minHeight ? minHeight = minHeight : minHeight = 600

// 為當前頁面綁定滾動事件

$(window).scroll(function() {

// 獲取頁面滾動高度

let osTop = $(window).scrollTop();

// 如果滾動高度大于頁面視口高度，就漸顯圖標，否則就漸隱圖標

if(osTop > minHeight){

$("#backtop").fadeIn(500);

}else {

$("#backtop").fadeOut(500);

}

})

// 定義回到頂部動畫

$("#backtop").click(

function(){$('html,body').animate({scrollTop:'0px'},'slow');

)}

總結

以上是生活随笔為你收集整理的vue 局部回到顶部_VUE回到顶部功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。