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>