vue中实现backTop(返回页面顶部)
在某个页面中需要返回页面顶部,但是在借鉴element-ui的官方例子时并没有实验成功。所以就查了查网上其他的资料整理如下:1.需要在自己的页面中添加div<div class="scroll" :class="{show:isActive}"><div id="toTop" @click="toTop(step)"><</div>...
·
在某个页面中需要返回页面顶部,但是在借鉴element-ui的官方例子时并没有实验成功。所以就查了查网上其他的资料整理如下:
1.需要在自己的页面中添加div
<div class="scroll" :class="{show:isActive}">
<div id="toTop" @click="toTop(step)"><</div>
</div>
2.声明变量isActive和控制速度的变量:
data () {
return {
isActive: false
}
},
props: {
step:{ //控制速度
type: Number,
default: 40
}
},
3.在mounted中添加监控页面scroll事件
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
上述代码中this.handleScroll是函数,“scroll”表示监听的事件名称。
4.handleScroll函数内容
handleScroll (e) {
if (document.documentElement.scrollTop > 50) {
this.isActive = true
} else {
this.isActive = false
}
},
5.接下来的是回到顶部函数 toTop()
toTop(step){
//参数step表示时间间隔的幅度大小,以此来控制速度
//当回到页面顶部的时候需要将定时器清除
document.documentElement.scrollTop-=step;
if (document.documentElement.scrollTop>0) {
var time=setTimeout(()=>this.toTop(step),15);
}else {
clearTimeout(time);
}
},
6.给标签添加css效果
.scroll{
position: fixed;
right: 10px;
bottom: 60px;
width: 45px;
height: 90px;
cursor: pointer;
display: none;
}
.scroll>div{
width: 45px;
height: 45px;
transform: rotate(90deg);
line-height: 45px;
text-align: center;
font-size: 35px;
font-family: "黑体";
background-color: rgba(0,0,0,.2);
color: #fff;
}
.scroll>div:hover{
background-color: rgba(0,0,0,.5);
}
.show{
display: block;
}
7.接下来是实际效果
多亏借鉴别的大佬的帖子,然后自己修改了一下。如果有什么不正确的地方,望指正。下面是借鉴大佬的原贴:
https://www.zhangshengrong.com/p/KWa3jVWz1o/
更多推荐
已为社区贡献3条内容
所有评论(0)