S
moo
th
S
croll
基于原生滚动条的平滑滚动JS
平滑滚动页面 | Smooth your scroll
scroll down
向下滚动，开始探索
什么是SmooScroll？
SmooScroll是一个免费开源、体积小、部署简单的平滑滚动JS，
基于原生JavaScript所以不需要任何依赖（比如jQuery、Vue等等）。
SmooScroll的效果基于原生滚动条，不会屏蔽默认滚动条或创建假滚动条，
同时包含非常简单就能使用的回到顶部按钮功能。
丝滑的滚动
向下滚动滚轮，体验带有阻尼感的丝滑页面滚动。
不用滚轮？没问题！
松开鼠标，尝试：
方向键 ↑ ↓ / PageUp PageDown / 拖拽滚动条
滚动依然丝滑
简单部署
想让整个页面平滑滚动？
在HTML中引入 SmooScroll auto-lite 版本，
SmooScroll就会让你的页面像这个网站一样获得平滑的滚动效果！
就这么简单！
不想让导航栏滚动？
没问题！引入 manual-lite 版本，自己创建SmooScroll容器，
把想要滚动的内容包裹进去！
听起来有点复杂？其实只需要新建一个
<div class="smooth-content"></div>！
还想添加回到顶部按钮？
那就引入不含 lite 的版本，
然后在SmooScroll文件中自定义你的按钮样式！
一行代码不用敲！
超小体积
小于 5 KB
加载毫无压力！
为什么使用SmooScroll？
如果需要给网页整体添加一个平滑滚动效果，SmooScroll会是一个不错的选择，SmooScroll体积小、简单易用。要使用SmooScroll，你只需要导入SmooScroll到你的网页就可以让它工作！
SmooScroll会自动将你的网页内容包裹进SmooScroll容器，让你的网页拥有平滑滚动效果。
或许你已经了解过类似的网页滚动JS，比如Lenis或GSAP ScrollSmoother。
与Lenis不同的一点是，SmooScroll的平滑滚动效果并不直接作用在滚动条上。最直观的区别就是，当使用键盘方向键或直接拖拽滚动条时，页面仍然会平滑的滚动，而不是与滚动条的移动直接绑定，效果更类似ScrollSmoother。
（2025年5月1日更新：GSAP被webflow收购，宣布全部插件免费）ScrollSmoother的优势是结合GSAP强大的插件库制作丰富且复杂的网页动画，如果只需要即插即用的页面平滑滚动效果和回到顶部按钮，SmooScroll也会是一个不错的选择。
现在开始使用SmooScroll！
SmooScroll is on GitHub
Get SmooScroll from GitHub
或者使用CDN链接快速体验auto-lite版本效果
<script src="https://cdn.jsdelivr.net/gh/ShuninYu/SmooScroll@v1.1.4/src/1.1.4/smooscroll-1.1.4-auto-lite.min.js"></script>在<head>中插入该代码，然后让SmooScroll施展魔法！
*如果你的页面有窗口固定元素，该版本效果可能会“用力过猛”
请下载manual版本并根据指南使用（相信我，依然很简单）
Gitee (中国内地)
从Gitee获取SmooScroll
*SmooScroll的Gitee仓库只是GitHub仓库的镜像，不保证与GitHub仓库同步更新。