vue滚动到一定位置显示置顶元素,点击返回顶部
效果图正常页面废话不多说直接上逻辑代码<div class="box_rtop" v-if="top" @click="tops()">//if先将元素隐藏,if浪费性能重新渲染mod,可以使用show可跟你你个人方式使用//top默认为false不显示<img src="../../../static/icons/联合 15.png" /></div><
·
- 效果图
- 正常页面
- 废话不多说直接上逻辑代码
<div class="box_rtop" v-if="top" @click="tops()">
//if先将元素隐藏,if浪费性能重新渲染mod,可以使用show可跟你你个人方式使用
//top默认为false不显示
<img src="../../../static/icons/联合 15.png" /></div>
<div class="box_ri" v-if="top">重要</div>
//这是写好的样式元素
mounted() {
var THIS = this;
window.addEventListener('scroll', function() {//监听滚动
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;为了兼容
if (scrollTop >= 108) {
//如果当前滚动位置大于您的所需要达到的高度则显示置顶元素,反之不显示
THIS.top = true;
} else {
THIS.top = false;
}
});
},
在你的置顶点击事件方法添加
// 置顶操作
tops(){
//使得返回顶部过渡置增加交互效果
var timer = setInterval(() => document.documentElement.scrollTop <= 0 ? clearInterval(timer) : window.scrollTo(0, document.documentElement.scrollTop - 10), 17);
},
更多推荐
已为社区贡献8条内容
所有评论(0)