在網頁開發中，經常會遇到需要讓頁面滾動到頂部的需求，這時候我們可以使用JavaScript來實現。而在Vue2中，提供了一種方便的方式來處理滾動到頁面頂部的需求。

在Vue2中，我們可以使用$refs來訪問組件中的DOM元素。在這里，我們可以使用$refs來訪問頁面的scrollTop屬性，來實現滾動到頁面頂部的操作。

export default {
data() {
return {
showButton: false
}
},
methods: {
scrollToTop() {
const top = this.$refs.scrollArea.scrollTop
if (top >0) {
window.requestAnimationFrame(this.scrollToTop)
this.$refs.scrollArea.scrollTop -= top / 8
}
}
},
mounted() {
window.addEventListener('scroll', () =>{
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.showButton = scrollTop >200
})
}
}

在上面的代碼中，我們使用$refs獲取到頁面的滾動區域，然后通過window.requestAnimationFrame來實現平滑滾動。同時，在mounted生命周期函數中，我們監聽window的滾動事件來控制返回頂部按鈕的顯示。

下面是頁面中的HTML代碼：

...
返回頂部

在上面的HTML代碼中，我們定義了一個scrollArea的ref屬性，用來訪問頁面中的滾動區域。同時，我們在頁面中添加了一個scroll-to-top按鈕，用來觸發返回頂部操作。

最后，需要注意的是，在Vue2中$refs是一個響應式的屬性，所以我們可以使用Vue的計算屬性來方便地獲取到$refs的值：

export default {
computed: {
scrollArea() {
return this.$refs.scrollArea
}
},
...
}

在上面的代碼中，我們定義了一個計算屬性scrollArea，用來獲取$refs.scrollArea的值。

綜上所述，在Vue2中，通過使用$refs來獲取頁面中的DOM元素，可以方便地實現滾動到頁面頂部的操作。同時，在頁面中添加一個返回頂部的按鈕，可以為用戶提供更好的使用體驗。