vue实现一键回到顶部
需求:滚动到一定距离返回到顶部,使用scrollintoView方法
完整代码
<template>
<div>
----~~内容~~----
//写在代码最新下面即可
<a herf="#top" target="self" id="backTop">
<img src="../img/返回顶部.png" alt/>
</a>
</div>
</template>
<script>
//1.监听滚动事件
//利用vue写一个在控制台打印当前的scrollTop
//在mounted钩子中给window添加一个滚动监听事件
mounted(){
window.addEventListener('scroll',this.scrollToTop)
},
methods:{
//监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置toTop为true,否则为false
//在方法中添加scrollToTop方法
scrollToTop(){
var scrollTop = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop;
console.log("距离顶部的距离"+scrollTop);
},
scrollToTop(el){
let topBtn = document.getElementById("backTop");
let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop;
let browserHeight = window.outerHeight;
if(scrollTop>browserHeight){
topBtn.style.display="block";
}else{
topBtn.style.display="none";
}
},
//离开该页面需要移除这个监听事件不然会报错
destroyed(){
window.remmoveEventListenner("scroll",this,scrollToTop);
}
}
</script>
<style>
a{
width:2rem;
height:2rem;
position:fixed;
display:none;
top:44rem;
right:0.2rem;
}
</style>