热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Javascript缓动(平滑)回到顶部效果

提供时间精确的,流畅的页面缓动回到顶部效果(Demo)。***Scrolltotop.*@param{number}durationDurationoftheanimation*f

提供时间精确的,流畅的页面缓动回到顶部效果(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 passedTime = Date.now() - originTime;
requestAnimationFrame(_scrollToTop);
scrollTo(originScrollX, originScrollY * (1 - easeingFunction(passedTime / duration)));
}
};
_scrollToTop();
}

推荐阅读
author-avatar
忧伤的嫖客
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有