S
moo
th
S
croll
基于原生滚动条的平滑滚动JS
平滑滚动页面 | Smooth your scroll
部署指南
deployment guide
选择SmooScroll类型
在部署前，选择适合你页面的SmooScroll类型是很重要的！
如果你只需要让你页面所有内容都平滑滚动
auto-lite 就是你的不二之选
*页面内没有 position: fixed 的元素
请使用最新版本的SmooScroll，避免旧版本的bug影响效果。
SmooScroll目前有四个细分类型，请根据需要选择。
下面是一个思维导图，帮助你按照思路来寻找适合你的版本：
回到顶部按钮？
↓ 有 没有 ↓
回到顶部按钮？
↓ 有 没有 ↓
版本
版本
版本
版本
下面是一个简单的类型对照表，供你快速参考：
| 版本后缀 | 自动包裹全部页面 | 自带回到顶部按钮 |
|---|---|---|
| auto | ✅ | ✅ |
| auto-lite | ✅ | ❌ |
| manual | ❌ | ✅ |
| manual-lite | ❌ | ❌ |
可以看出，四个版本就是 auto、manual 和 lite 的不同组合，
下面会更详细的解释这三个后缀的含义。
auto
带有auto的版本会自动将整个页面内容包裹进SmooScroll容器，适合没有任何相对浏览器窗口固定位置（position: fixed;）的元素（比如固定的导航栏、按钮等）的页面。
这个版本的部署非常简单，只需要引入SmooScroll并做一些参数修改即可生效。
如果是auto-lite版本，你甚至只需要引入SmooScroll就可以了！
manual
带有manual的版本需要你手动将页面内需要平滑滚动的内容包裹进SmooScroll容器中，适合页面内有相对浏览器窗口固定位置（position: fixed;）的元素（比如固定的导航栏、按钮等）的页面。
不用担心自己会忘记添加包裹层，如果你没有创建包裹层，SmooScroll会在页面刷新时提醒你。
lite
带有lite的版本不包含SmooScroll的回到顶部按钮，如果你的页面已经有了回到顶部按钮，且部署了lite版本以后这个按钮仍然完美工作，那么就可以放心的使用lite版本。
如果使用lite版本的SmooScroll以后，你的回到顶部按钮失效了，那么建议使用不带lite的版本。
添加SmooScroll到你的网页
目前有两种方式可以部署SmooScroll：
1. CDN部署（仅 auto-lite 版本）
auto-lite 版本的部署非常简单，只需要添加下面的代码到
<head>内即可！不需要任何其他操作即可使SmooScroll生效！
（该CDN链接为最新版本，请放心复制）
<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>*如果需要调整滚动效果，请使用本地部署
2. 本地部署（适合所有版本）
① 下载SmooScroll并存储在你的网站目录中
SmooScroll is on GitHub
Get SmooScroll from GitHub
Gitee (中国内地)
从Gitee获取SmooScroll
*SmooScroll的Gitee仓库只是GitHub仓库的镜像，不保证与GitHub仓库同步更新。
② 在HTML文件中引入你下载的 SmooScroll JavaScript
<!--记得替换路径和文件名为你自己的路径和对应版本文件名-->
<script src="your/path/to/smooscroll-auto-lite.min.js"></script>⚠️请注意文件名称，不同版本会有不同的文件名。
③ 创建包裹层（仅 manual 版本）
在<body>中添加
<div class="smooth-content"></div>并将所有需要滚动的内容包裹进这个div内，例如：
<body>
<!-- ↓↓↓不需要滚动的元素↓↓↓ -->
<div class="topbar">
<h1>固定的标题
</div>
<!-- ↓↓↓创建包裹层并将需要滚动的内容包裹进去↓↓↓ -->
<div class="smooth-content">
<!-- ↓↓↓需要滚动的元素↓↓↓ -->
<div class="article">
<p>需要滚动的内容
</div>
</div>
</body>这样，SmooScroll就成功的部署在你的网页里了。
接下来就是修改SmooScroll的配置，来自定义你的平滑滚动体验。
*非 lite 版本需要设置按钮图片才能让回到顶部按钮生效。
修改SmooScroll配置
SmooScroll支持通过修改参数来自定义平滑滚动效果，
并且非 lite 版本的回到顶部按钮可以自定义样式！
调整滚动效果（所有版本通用）
在SmooScroll开头中的 const config 中修改参数，参考：
| 参数 | 默认值 | 效果 |
|---|---|---|
| scrollStepDuration | 1 | 每步平滑滚动效果时长（单位秒） |
| bezier | .35,.73,.69,1 | 平滑滚动的贝塞尔曲线值（⚠️如果你不知道这是什么，那别动它就完事了） |
自定义回到顶部按钮样式（仅非lite版本）
⚠️如果lite版本和你自己的回到顶部按钮不兼容，
请更换成非lite版本使用SmooScroll自带的回到顶部按钮。
在SmooScroll开头中的 const config中修改参数，参考：
| 参数 | 默认值 | 效果 |
|---|---|---|
| buttonImage | - | 按钮图片路径 |
| renderStyle | normal | 如果你的按钮图片是原尺寸像素图，把它改为pixelated，否则不需要改动 |
| buttonWidth | 90px | 按钮的宽度（如果需要按照窗口比例定位可以将单位从px改为vw，即窗口宽度，1vw = 窗口宽度1%） |
| buttonHeight | 90px | 按钮的高度，单位也可以改为vw |
| positionRight | 20px | 按钮距离页面窗口右端的距离，单位也可以改为vw |
| positionBottom | 20px | 按钮距离页面窗口底端的距离，单位也可以改为vw |
| showAtPosition | 80 | 滚动多少像素后回到顶部按钮才会出现 |
以上就是SmooScroll的部署指南，
体验SmooScroll带给网页的平滑滚动效果吧！
获取SmooScroll
SmooScroll is on GitHub
Get SmooScroll from GitHub
Gitee (中国内地)
从Gitee获取SmooScroll
*SmooScroll的Gitee仓库只是GitHub仓库的镜像，不保证与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版本并根据指南使用（相信我，依然很简单）