原生javascript如何实现回到顶部平滑滚动?

JavaScript04

原生javascript如何实现回到顶部平滑滚动?,第1张

// 设置准备要滚动的元素

let p = document.getElementById('userDetailContent').parentNode

// 该元素目前 顶部 被卷起(隐藏)的高度

let t = p.scrollTop

// 这段匀速运动 分30步来走, step:每一步走的距离

let step = Math.floor(t / 30)

if( step > 1)  //一步最少要走1个像素,否则无限触发滚动

    (function walkTop(t) {

        setTimeout(()=>{

            // scrollTo( x轴滚动, y轴)

            p.scrollTo(0, t -= step) // 走一步, 将剩余路程 减去一步的路程的结果

            if(t<0) return // 停止迭代循环

            walkTop(t)//迭代

        },1)// 每毫秒走一步

    })(t) // 自执行函数 传入参数t ,!important

使用缓动功能,您可以加快或放慢动画的开头或结尾速度,以获得更加逼真或更加令人愉悦的效果。该技术用于修改 Flash 计算补间中的属性关键帧之间的属性值的方式。如果不使用缓动,Flash 在计算这些值时,会使对值的更改在每一帧中都一样。如果使用缓动,则可以调整对每个值的更改程度,从而实现更自然、更复杂的动画。缓动是应用于补间属性值的数学曲线。补间的最终效果是补间和缓动曲线中属性值范围组合的结果。例如,在制作汽车经过舞台的动画时,如果让汽车从停止开始缓慢加速,然后在舞台的另一端缓慢停止,则动画会显得更逼真。如果不使用缓动,汽车将从停止立刻到全速,然后在舞台的另一端立刻停止。如果使用缓动,则可以对汽车应用一个补间动画,然后使该补间缓慢开始和停止。一个未应用缓动的运动路径。请注意帧沿路径的均匀分布。已应用“停止并启动(中)”缓动的同一运动路径。请注意路径末尾附近帧的浓度,产生更逼真的汽车加速和减速。可以在属性检查器或动画编辑器中应用缓动。在属性检查器中应用的缓动将影响补间中包括的所有属性。在动画编辑器中应用的缓动可以影响补间的单个属性、一组属性或所有属性。缓动可以简单,也可以复杂。Flash 包含一系列的预设缓动,适用于简单或复杂的效果。在动画编辑器中,还可以创建自己的自定义缓动曲线。缓动的常见用法之一是在舞台上编辑运动路径并启用浮动关键帧以使每段路径中的运行速度保持一致。然后可以使用缓动在路径的两端添加更为逼真的加速或减速。在向属性曲线应用缓动曲线时,属性曲线图形区域中将显示缓动曲线的可视叠加。通过将属性曲线和缓动曲线显示在同一图形区域中,叠加使得在测试动画时了解舞台上所显示的最终补间效果更为方便。因为动画编辑器中的缓动曲线可以很复杂,所以可以使用它们在舞台上创建复杂的动画而无需在舞台上创建复杂的运动路径。除空间属性 X、Y 和 Z 外,还可以使用缓动曲线创建其他任何属性的复杂补间。