jquery&vue backTop缓慢返回顶部的方法应用

前言：刚应用Vue框架不久

jquery:

　　jquery的方法相对来说比较简单一点，直接使用animate:

$('点击返回顶部元素').click(function(e){
     e.preventDefault();
     if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000);
return false;
}
     $('body').animate({scrollTop:0},1000);
     return false;
})

vue:

　　因为返回顶部是在多处使用的，直接封装成自定义指令来调用了。

　　自己犯得小错误：由于之前不注意给body、html、#app都给了overflow-y:scroll;造成页面滚动给到其他元素上，导致console.log(document.documentElement.scrollTop,document.body.scrollTop)打印出来的数值都是0 0，页面也滚动不了。之后只给了body设置了overflow-y:scroll,就实现返回顶部的功能了。

　　

Vue.directive('back-top',{
	inserted(el,binding){
		let e = binding.arg || 'click'
		el.addEventListener(e,function(){
			//console.log(document.body.scrollTop)
			var cancelScroll  = false;
			var timer = null;
			if( cancelScroll === false ){
				timer = setInterval(function(){
					var osTop = document.documentElement.scrollTop || document.body.scrollTop;
					//console.log(document.documentElement.scrollTop,document.body.scrollTop)
					var ispeed = Math.floor(osTop-20);
					document.documentElement.scrollTop = document.body.scrollTop = ispeed;
					if( osTop === 0 ){
						clearInterval(timer);
					}
				},10)
			}else{
				clearInterval(timer);
				cancelScroll = true
			}
			
		})
	}
});

应用：
<div class="returnTop" v-back-top>
	<i class="iconfont icon-xiangshangjiantou"></i>
</div>