美文网首页
返回顶部

返回顶部

作者: 甘蔗夫 | 来源:发表于2017-06-20 21:54 被阅读0次

<code>
function goTop(doc) {
var timer = null,
current = 0, //当前位置
target = 0, // 目标位置
gotop = document.querySelector(doc);
window.onscroll = function () {
// 获取scrollptop(兼容性写法)
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if (scrollTop > 0) {
gotop.style.display = "block";
} else {
gotop.style.display = "none";
}
current = scrollTop;
}
gotop.addEventListener('click', function () {
clearInterval(timer);
timer = setInterval(function () {
var step = (target - current) / 2;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current = current + step;
window.scrollTo(0, current);
if (current === target) {
clearInterval(timer);
}
}, 30)
});
}
</code>

相关文章

  • Vue与小程序的返回顶部记录

    默认返回顶部按钮是隐藏,滚动一段距离后才显示 VUE 返回顶部 小程序 返回顶部

  • js 返回页面顶部(动画)

    js 返回到页面顶部,含有渐变或者动画效果 点击返回顶部按钮,页面逐渐向上回到顶部: js 返回到页面顶部,直接返...

  • 返回顶部

    function goTop(doc) {var timer = null,current = 0, //当前位置...

  • 返回顶部

    jQuery 原生

  • 返回顶部

  • 绽放

    返回顶部

  • 返回顶部实现

    当用户下拉一定距离,显示返回顶部按钮 监听下拉 返回顶部

  • 用vue封装一个返回顶部的按钮组件goTop.vue

    这是1个封装好的返回顶部组件 在需要使用返回顶部按钮的地方引入使用即可 如果全局都需要返回顶部按钮,直接在app....

  • 返回顶部按钮

    之前写过几次返回顶部的按钮,但是因为没有在动画结束时,使用回调函数,所以一直没发现,其实动画是执行了两次的。各大论...

  • JS返回顶部

    当鼠标滚轮滚到页面底部或中部,需点击一个页面中固定定位的div,让页面回到顶部最开始加载的位置。

网友评论

      本文标题:返回顶部

      本文链接:https://www.haomeiwen.com/subject/kfiaqxtx.html