JavaScript特效！scroll与缓动动画

特效！scroll与缓动动画"/>

JavaScript特效！scroll与缓动动画

本文笔记基于「千古壹号」的GitHub项目：

文章目录

• 1.基础
• 2.固定导航栏
• 3.scrollTo方法
• • 3.1 举例：回到顶部
  • 3.2 方法应用
  • 3.3 回调函数

1.基础

• 原理：盒子未来位置=当前位置+步长，步长会越来越小。设置点击事件，事件函数为定时器。

 div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";

• 封装函数：与[匀速动画构造类似，但是步长原理不同，匀速的是固定的，而缓动会随当前值发生变化；

function animate(ele, target) {//1.清除定时器并设置定时器函数clearInterval(ele.timer);ele.timer = setInterval(function () {//2.处理步长var step = (target - ele.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);//3.if函数判断当前位置if (Math.abs(target