上滑到顶部
绑定点击事件：
<div class="totop">
<a @click="backTop()" size="50" v-show="tabshow" class="btn btn-default"
><span class="fa"></span
></a>
</div>点击事件方法：
data() {
return {
scrollTopNum: "", //页面滚动的高度
tabshow: false, //是否进行某种操作
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
methods: {
handleScroll() {
let top =
document.documentElement.scrollTop ||
document.body.scrollTop ||
window.pageYOffset;
this.scrollTopNum = top;
},
backTop() {
const goToTop = () => window.scrollTo(0, 0);
goToTop();
},
},
//监听距离头部多少显示按钮
watch: {
scrollTopNum: function () {
if (this.scrollTopNum > 50) {
this.tabshow = true;
} else {
this.tabshow = false;
}
},
},下滑滑动
绑定点击事件：
<div class="tobuttom"></div>
<a @click="backButtom()" href="#" class="wangxia">
<span class="xiabai"></span>
</a>点击事件方法：
data() {
return {
scrollButtomNum: "", //页面滚动的高度
};
},
methods: {
handleScroll() {
let Buttom =
document.documentElement.scrollButtom ||
document.body.scrollButtom ||
window.pageYOffset;
this.scrollButtomNum = Buttom;
},
backButtom() {
const goToButtom = () => window.scrollTo(0, 3380);//滚动到页面的位置3380
goToButtom();
},
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
