Javascript缓动（平滑）回到顶部效果

jsdt 发布于2019-08-23 16:17 / 896人阅读

提供时间精确的，流畅的页面缓动回到顶部效果（Demo）。

/**
 * Scroll to top.
 * @param    {number}    duration    Duration of the animation
 */
function scrollToTop(duration = 750) {
    // More easeing-function: https://github.com/cferdinandi/smooth-scroll
    let easeingFunction = t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
    let originScrollY = pageYOffset;
    let originScrollX = pageXOffset; // Keep abscissa
    let originTime = Date.now();
    let passedTime = 0;
    let _scrollToTop = () => {
        if (passedTime < duration) {
            passedTime = Date.now() - originTime;
            requestAnimationFrame(_scrollToTop);
            scrollTo(originScrollX, originScrollY * (1 - easeingFunction(passedTime / duration)));
        }
    };
    _scrollToTop();
}

GPU云服务器云服务器回到顶部网页回到顶部回到顶部按钮 html 回到顶部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102861.html

Javascript缓动（平滑）回到顶部效果

提供时间精确的，流畅的页面缓动回到顶部效果（Demo）。 /** * Scroll to top. * @param {number} duration Duration of the animation */ function scrollToTop(duration = 750) { // More easeing-function: https://githu...

URLOS 2019-08-02 16:08 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

layman 2019-08-29 17:08 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

littlelightss 2019-08-23 12:36 评论0 收藏0
【前端优化】动画几种实现方式总结和性能分析

摘要：备注没整理格式，抱歉动画实现的几种方式性能排序实现方式自身调用调用的定时器值推荐最小使用的原因即每秒帧为什么倒计时动画一定要用而避免使用两者区别及引发的线程讨论线程讨论为什么单线程是的一大特性。备注：没整理格式，抱歉动画实现的几种方式：性能排序js < requestAnimationFrame 3->4->2. 那么在来看你这段代码。 var t = true; window...

IamDLY 2019-08-23 15:35 评论0 收藏0
JavaScript 进阶知识 - 特效篇(一)

摘要：之前是一个全局变量，如果不独立，页面只有一个定时器在运作。这时的判断条件应该是目标距离与盒子目前距离之间差的绝对值大于等于一步距离绝对值的时候，让他们执行否则的话清除清除定时器，并将最后的距离直接设置为的距离。 showImg(https://segmentfault.com/img/remote/1460000012623412?w=1920&h=1080); JS特效前言经过前...

curlyCheng 2019-08-21 18:27 评论0 收藏0