html代码 这里样式就忽略吧 只是一个简单的上箭头图标
这里记得绑定点击事件
<div @click="backTop">
<i class="iconfont icon-shangjiantou"></i>
<p>顶部</p>
</div>
在methods中写上回到顶部的方法
// 点击图片回到顶部方法,加计时器是为了过渡顺滑
backTop () {
const that = this;
document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop -4000;
},
// 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏
scrollToTop () {
const that = this
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
that.scrollTop = scrollTop
if (that.scrollTop > 60) {
that.btnFlag = true
} else {
that.btnFlag = false
}
},