Vue 怎么做scrolltop 的滚动动画

Question

做个了需求是点击右侧的item左边滚动到队员的位置。。请问怎么可以在滚的时候加一些过度效果。。下面是我的代码scrollToEl(name){letscrollPosition=0this.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].offsetTopconsole.log(total);//Chromedocument.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);
}
}
};