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>