前端 平滑滚动到底部/顶部

页面滚动时,添加平滑特效

1.在页面入口处,添加css

1 html {
2     scroll-behavior: smooth;
3 }

添加全局css之后,直接使用window.scroll(0,0)就可以平滑滚动到顶部了。

注:兼容性很差,仅支持火狐、chrome高级版本

2.指定滚动操作,使用平滑效果

平滑滚动到某块元素的底部:scrollIntoView

1     let anchorElement = document.getElementById("softwareHeader-container");
2     let scrollIntoViewOptions: ScrollIntoViewOptions = {
3         block: 'end',
4         behavior: "smooth"
5     }
6     if (anchorElement) {
7         anchorElement.scrollIntoView(scrollIntoViewOptions)
8     }

获取指定元素也可以通过类名获取:

1   scrollToTop = () => {
3     const exerciseContainerRoot = (document.getElementsByClassName('question-list-item') as HTMLCollectionOf<HTMLElement>)[0];
4     let scrollIntoViewOptions: ScrollIntoViewOptions = {
5       block: 'start',
6       behavior: 'smooth',
7     };
8     exerciseContainerRoot.scrollIntoView(scrollIntoViewOptions);
9   };

或者平滑滚动到指定位置:ScrollToOptionsscrollTo

1   let scrollOptions:ScrollToOptions = {
2     left: 0,
3     top: 1000,
4     behavior:'smooth'
5   }
6 
7   window.scrollTo(scrollOptions);

兼容性:大部分支持,猎豹不支持。

3.添加JS滚动代码

滚动到顶部:

复制代码
 1     returnTop = () => {
 2         //记录当前执行动画的标识
 3         let animationStepNumber;
 4         function exeucteAnimationByStep() {
 5             //当前页面的滚动高度
 6             let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 7             if (currentScrollTop >= 4) {
 8                 animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
 9                 let scrollLocationChanging = currentScrollTop / 9;
10                 scrollLocationChanging = scrollLocationChanging > 1 ? scrollLocationChanging : 1;
11                 let newScrollTop = currentScrollTop - scrollLocationChanging;
12                 window.scrollTo(0, newScrollTop);
13             } else {
14                 window.cancelAnimationFrame(animationStepNumber);
15                 window.scrollTo(0, 0);
16             }
17         }
18         animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
19     }
复制代码

滚动到底部:

复制代码
 1   scrollToPageBottom = () => {
 2     let animationStepNumber;
 3     function exeucteAnimationByStep() {
 4       let currentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 5       let totalHeight = (document.documentElement.scrollHeight || document.body.scrollHeight) - window.innerHeight;
 6       //剩余的高度
 7       let scrollingHeight = totalHeight - currentScrollTop;
 8       if (scrollingHeight >= 4) {
 9         animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
10         //滚动变量
11         let scrollChangedHeight = scrollingHeight / 9;
12         scrollChangedHeight = scrollChangedHeight > 1 ? scrollChangedHeight : 1;
13         window.scrollTo(0, currentScrollTop + scrollChangedHeight);
14       } else {
15         window.cancelAnimationFrame(animationStepNumber);
16         window.scrollTo(0, totalHeight);
17       }
18     }
19     animationStepNumber = window.requestAnimationFrame(exeucteAnimationByStep);
20   };
复制代码

原理:

requestAnimationFrame,告诉浏览器重绘时执行动画,参数是具体执行方法,返回参数是nubmer(标识)
注:如果需要连续执行动画,则需要在回调函数中,先添加一个待执行动画回调requestAnimationFrame。(如上案例)
cancelAnimationFrame,取消待执行的动画。
注:执行完所有动画后,一定要注销上一个动画回调(如果有的话),否则会影响页面滚动(因为回调函数中的动画委托还在待处理呢)。

兼容性:平滑效果,支持所有浏览器。

缺陷:滚动过程中,不能操作手动滚动页面。这个缺陷,也有理论上的解法,可以添加滚动事件监听,如果滚动方向与平滑动画效果方向相反,则取消平滑动画的处理(调cancelAnimationFrame即可)

特别提示:添加纯js平滑滚动方案,需要将第1个方案css全局的设置删除了,否则滚动会很缓慢。

posted @   唐宋元明清2188  阅读(1728)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示
剑桥
16:15发布
剑桥
16:15发布
7°
西南风
3级
空气质量
相对湿度
66%
今天
2°/10°
周三
2°/8°
周四
中雨
2°/7°