选择SmooScroll类型

在部署前，选择适合你页面的SmooScroll类型是很重要的！

如果你只需要让你页面所有内容都平滑滚动
auto-lite 就是你的不二之选
*页面内没有 position: fixed 的元素

请使用最新版本的SmooScroll，避免旧版本的bug影响效果。
SmooScroll目前有四个细分类型，请根据需要选择。

下面是一个思维导图，帮助你按照思路来寻找适合你的版本：

你的网页是否有固定元素？
例如：示例页右上角的盒子
↙有　　　　　没有↘

你的网页是否已有
回到顶部按钮？
↓ 有　　　没有 ↓

manual-lite
版本

manual
版本

auto-lite
版本

auto
版本

下面是一个简单的类型对照表，供你快速参考：

版本后缀	页面包裹	自带回到顶部按钮	*伪sticky效果
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的版本。

伪 sticky 效果

注：该效果目前为实验性效果（v1.2.0）。
SmooScroll的工作原理会导致页面中的 position: sticky; 失效，所以添加了一个可以实现视觉上类似sticky效果的功能来实现粘性定位效果。目前伪sticky功能只支持顶部附着，且一个页面内最多只能有一个伪sticky元素，但是该伪sticky元素可以有无限制的子元素。

添加SmooScroll到你的网页

目前有两种方式可以部署SmooScroll：

1. CDN部署（仅 auto-lite 版本）

auto-lite 版本的部署非常简单，只需要添加下面的代码到
<head>内即可！不需要任何其他操作即可使SmooScroll生效！
（该CDN链接为最新版本，请放心复制）

<script src="https://cdn.jsdelivr.net/gh/ShuninYu/SmooScroll@v1.2.0/src/smooscroll-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>固定的标题</h1>
    </div>
    <!-- ↓↓↓创建包裹层并将需要滚动的内容包裹进去↓↓↓ -->
    <div class="smooth-content">
        <!-- ↓↓↓需要滚动的元素↓↓↓ -->
        <div class="article">
            <p>需要滚动的内容</p>
        </div>
    </div>
</body>

③ 设置伪sticky效果（仅manual版本）

*如果有需要在窗口顶部粘性定位的元素（例如顶部导航栏），那么可以设置伪sticky效果。

接下来将以下面这个 HTML 片段为例，假设<div class="topbar"></div>是需要粘性定位的元素，该元素的布局为 display: flex;。

<body>
    <div class="smooth-content"></div>
            <div class="topbar"><!--顶部导航栏，需要粘性定位-->
                <a>按钮1</a>
                <a>按钮2</a>
            </div>
        <div class="article">
            <p>正文内容</p>
        </div>
    </div>
</body>

定位到需要粘性定位的元素，复制该元素，将副本粘贴在SmooScroll容器之外。并在该元素本体中添加 id="smoosticky"，在副本中添加 id="smoosticker"。

<body>
    <div class="smooth-content"></div>
            <div class="topbar" id="smoosticky"><!--顶部导航栏，需要粘性定位-->
                <a>按钮1</a>
                <a>按钮2</a>
            </div>
        <div class="article">
            <p>正文内容</p>
        </div>
    </div>
    <div class="topbar" id="smoosticker"><!--顶部导航栏的副本-->
        <a>按钮1</a>
        <a>按钮2</a>
    </div>
</body>

给副本创建并添加一个自定义的class，将副本变为 position: fixed; 的元素，并且调整css，使其与本体完全重合（z-index一定要高于本体）。

<body>
    <div class="smooth-content"></div>
            <div class="topbar sticky-element" id="smoosticky"><!--顶部导航栏，需要粘性定位-->
                <a>按钮1</a>
                <a>按钮2</a>
            </div>
        <div class="article">
            <p>正文内容</p>
        </div>
    </div>
    <div class="topbar" id="smoosticker"><!--顶部导航栏的副本-->
        <a>按钮1</a>
        <a>按钮2</a>
    </div>
    <style>
        .sticky-element {
            position: fixed;
        }
    </style>
</body>

在SmooScroll中，找到位于 const config 下面的 var stickyDisplay ，将其赋值改为粘性定位元素本体的布局。在这个例子中，topbar 本体的布局为 display: flex; 。

var stickyDisplay = "flex"; /*请根据你的情况修改*/

这样就完成了伪sticky效果的设置。通过这个例子，应该也能了解这个伪sticky效果的原理。其实很简单，就是在窗口顶部预先放置一个锁定窗口位置的副本，当窗口顶部开始覆盖粘性定位元素的瞬间，隐藏该元素本体并显示锁定位置的副本。当元素本体从顶部完整回到窗口内时，隐藏副本并显示本体。这个伪sticky效果由于是通过调整元素本体透明度来隐藏本体，所以元素所占的空间并不会消失，从而不会改变页面原本的布局。

这样，SmooScroll就成功的部署在你的网页里了。

接下来就是修改SmooScroll的配置，来自定义你的平滑滚动体验。

*非 lite 版本需要设置按钮图片才能让回到顶部按钮生效。

修改SmooScroll配置

SmooScroll支持通过修改参数来自定义平滑滚动效果，
并且非 lite 版本的回到顶部按钮可以自定义样式！

调整滚动效果（所有版本通用）

在SmooScroll开头中的 const config 中修改参数，参考：

参数	默认值	效果
scrollStepDuration	1	每步平滑滚动效果时长（单位秒）
bezier	.35,.73,.69,1	平滑滚动的贝塞尔曲线值（⚠️如果你不知道这是什么，那别动它就完事了）

伪sticky效果（仅v1.2.0以后的manual版）

参数	默认值	效果
stickyDisplay	flex	粘性定位元素的默认显示模式，根据你的粘性定位元素的设置来修改

自定义回到顶部按钮样式（仅非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.2.0/src/smooscroll-auto-lite.min.js"></script>

在<head>中插入该代码，然后让SmooScroll施展魔法！

*如果你的页面有窗口固定元素，该版本效果可能会“用力过猛”
请下载manual版本并根据指南使用（相信我，依然很简单）

S

moo

th

S

croll

选择SmooScroll类型

在部署前，选择适合你页面的SmooScroll类型是很重要的！

如果你只需要让你页面所有内容都平滑滚动auto-lite 就是你的不二之选*页面内没有 position: fixed 的元素

auto

manual

lite

伪 sticky 效果

添加SmooScroll到你的网页

1. CDN部署（仅 auto-lite 版本）

2. 本地部署（适合所有版本）

① 下载SmooScroll并存储在你的网站目录中

SmooScroll is on GitHub

Gitee (中国内地)

② 在HTML文件中引入你下载的 SmooScroll JavaScript

③ 创建包裹层（仅 manual 版本）

③ 设置伪sticky效果（仅manual版本）

修改SmooScroll配置

调整滚动效果（所有版本通用）

伪sticky效果（仅v1.2.0以后的manual版）

自定义回到顶部按钮样式（仅非lite版本）

获取SmooScroll

SmooScroll is on GitHub

Gitee (中国内地)

或者使用CDN链接快速体验auto-lite版本效果

如果你只需要让你页面所有内容都平滑滚动
auto-lite 就是你的不二之选
*页面内没有 position: fixed 的元素