vue返回顶部带动画
一. 需求
首页内容多，翻过首页第一页，显示返回顶部按钮
二. 逻辑
1.判断返回顶部按钮什么时候显示：
借助@scroll监听滚动，获取当前滚动距离顶部的高度，获取当前屏幕高度，当滚动高度大于屏幕高度，显示返回顶部按钮，反之小于隐藏。
2.点击按钮，为返回顶部加上动画：
设置步进值，通过逐渐增加步进值，来实现动画效果。注意这里要防止用户多次点击，加上开关。
三.遇到的问题
1.设置window.scrollTop(0,滚动高度) 和document.documentElement.scrollTop=滚动高度 无效：
由于是加在id=box上的滚动，并且由于头部底部fixed固定，中间box也设置了固定定位。样式设置的差异与理想的较大，滚动区域实际是box，并且查看了监视滚动方法getScrollTop方法，确定滚动元素是box,所以给box加上ref属性获取到，并将滚动的高度赋值给this.$refs.box.scrollTop
2.滚动缓慢：
【vue返回顶部带动画】在setInterval里未设置步进值steep递增，匀速滚动效果体验差。
四.代码参考
具体内容
文章图片
.box{
position: absolute;
top: 0;
bottom: 48px;
left: 0;
right: 0;
overflow-y: auto;
z-index: 1;
padding-top: 44px;
background-color: #f4f4f4;
font-size: 15px;
color: #000000;
}
.scrollTop{
position: fixed;
right: 40px;
bottom: 80px;
cursor: pointer;
width:41px;
height: 41px;
z-index: 2;
img{
width:100%;
height:100%;
}
}推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- 前端代码|前端代码 返回顶部 backToTop
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show