仲灏小栈 仲灏小栈
首页
大前端
后端&运维
其他技术
生活
关于我
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

仲灏

诚意, 正心, 格物, 致知
首页
大前端
后端&运维
其他技术
生活
关于我
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《前端项目基础建设》
  • HTML&CSS

  • JavaScript&TypeScript

    • typescript 万金油
    • 缓缓滚动到顶部实现方式
    • js 精准和模糊获取dom
    • iframe 笔记
    • 文件上传安全问题
    • 时间处理
    • Web H5 接入海康录像机 (rtsp转flv)
    • 全局数据
    • 持久化数据
    • typescript 类型库
    • type
    • 前端开发这些年碰到不常见的api(不论新旧 持续更新)
    • js api常用详解
    • 搭建typescript环境刷LeetCode算法
    • typescript 类型联动
    • 前端避免一直try...catch...(ts装饰器)
    • 高效操作DOM
    • 用好DOM事件
    • 理解 AST 实现和编译原理
    • 常用正则
    • js面试技能拼图 this
    • for...in for...of 区别
    • js 获取元素大小
  • Node

  • 构建

  • Vue

  • React

  • 小程序

  • 跨端

  • Electron

  • WebGL&GIS

  • 浏览器

  • 面经

  • 其他

  • 大前端
  • JavaScript&TypeScript
仲灏
2021-11-29

缓缓滚动到顶部实现方式

scrollToTop() {
  const cubic = value => Math.pow(value, 3);
  const easeInOutCubic = value => (value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2);
  const beginTime = Date.now();
  const beginValue = this.scrollToTopNum;
  // const rAF = wx.requestAnimationFrame || (func => setTimeout(func, 16));
  const rAF = func => setTimeout(func, 16);
  const frameFunc = () => {
    const progress = (Date.now() - beginTime) / 500;
    if (progress < 1) {
      this.scrollToTopNum = beginValue * (1 - easeInOutCubic(progress));
      rAF(frameFunc);
    } else {
      this.scrollToTopNum = 0;
    }
  };
  rAF(frameFunc);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
上次更新: 2022/06/05, 20:31:36
typescript 万金油
js 精准和模糊获取dom

← typescript 万金油 js 精准和模糊获取dom→

最近更新
01
vim日常使用记录
04-02
02
滑动窗口最大值
04-02
03
有效的字母异位词
04-02
更多文章>
Theme by Vdoing | Copyright © 2021-2025 izhaong | github | 蜀ICP备2021031194号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式