Vue 怎么做scrolltop 的滚动动画

Question

做个了需求是点击右侧的item左边滚动到队员的位置。。请问怎么可以在滚的时候加一些过度效果。。下面是我的代码
scrollToEl(name){
letscrollPosition=0
this.playerlist.forEach((item,index)=>{
if(item.players_name==name){
scrollPosition=index
}
})
//this.$refs.index[scrollPosition].scrollIntoView()
letjump=document.querySelectorAll('.pick-right-item')
lettotal=jump[scrollPosition].offsetTop
console.log(total);
//Chrome
document.body.scrollTop=total
}
这样可以直接滚动到制定位置，但是在vue中怎么做scroll的滚动动画。。

Answer 1

今天我也刚好遇到这个问题，把它做成了vue组件，带滚动动画完美解决，以下是完整代码：exportdefault{name:'ScrollTop',data(){return{//定义滚动条默认位置scrollTop:null,//定义按钮默认状态isScrollTop:false}},props:{el:String},mounted(){//监听滚动事件window.addEventListener('scroll',()=>{this.scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop||document.querySelector(this.el).scrollTop;//控制滚动按钮的隐藏或显示if(this.scrollTop>150){this.isScrollTop=true;}else{this.isScrollTop=false;}},true);},methods:{/***滚动到顶部*/scrollToTop(){let$this=this;//返回顶部动画特效setTimeout(functionanimation(){if($this.scrollTop>0){setTimeout(()=>{//步进速度$this.scrollTop=$this.scrollTop-30;//返回顶部if(document.documentElement.scrollTop>0){document.documentElement.scrollTop=$this.scrollTop-30;}elseif(window.pageYOffset>0){window.pageYOffset=$this.scrollTop-30;}elseif(document.body.scrollTop>0){document.body.scrollTop=$this.scrollTop-30;}elseif(document.querySelector($this.el).scrollTop){document.querySelector($this.el).scrollTop=$this.scrollTop-30;}animation();},1);}},1);}}};