js滑动页面时，平滑过渡，示例

小糊涂加油

于 2020-09-22 21:21:04 发布

阅读量887

点赞数

CC 4.0 BY-SA版权

文章标签： reactjs

本文链接：https://blog.csdn.net/Elaine20132014/article/details/108741479

本文介绍了一种使用JavaScript实现页面元素平滑滚动的方法。通过计算滚动距离和时间间隔，使页面在指定时间内平滑滚动到目标位置。适用于需要优化用户体验的Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setScrollTopSmooth(end, time?){
		let start = this.getScrollTop();
		const val = end-start;
		const times = time ? time/10 : 30;
		const step = Math.floor(val/times);
        if(Math.abs(val)>2){
            const timer = setInterval(()=>{
				start += step;
                if(Math.abs(end-start) < Math.abs(step/2) || (val>0 && start >= end) || (val<0 && start <= end)){
                    clearInterval(timer);
                    this.setScrollTop(end);
                }else{
                    this.setScrollTop(start);
                }
            },10)
        }
	}

getScrollTop(){
    //获取scrolltop
}

setScrollTop(){
    //设置scroll
}