<article data-v-608e4900="">
    <section class="markdown">
        <h1>BackTop <span class="subtitle">回到顶部</span></h1>
        <section class="markdown">
            <p>返回页面顶部的操作按钮。</p>
            <h2 id="何时使用">何时使用</h2>
            <ul>
                <li>当页面内容区域比较长时；</li>
                <li>当用户需要频繁返回顶部查看相关内容时。</li>
            </ul>
        </section>
    </section>
    <section class="markdown">
        <h2>代码演示</h2>
    </section>
    <div class="ant-row" data-v-608e4900="" style="margin-left: -8px; margin-right: -8px; row-gap: 0px;">
        <div class="ant-col ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="components-back-top-demo-basic">
                <section class="code-box-demo">
                    <!---->Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button. </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#components-back-top-demo-basic">基本使用</a></div>
                    <div class="code-box-description">
                        <p>最简单的用法。</p>
                    </div>
                </section>
                <section class="highlight-wrapper">
                    <div class="highlight">
                        <pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-back-top</span> <span class="token punctuation">/&gt;</span></span>
  Scroll down to see the bottom-right
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>64<span class="token punctuation">,</span> 64<span class="token punctuation">,</span> 64<span class="token punctuation">,</span> 0.6<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>gray<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span>
  button.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre>
                    </div>
                </section>
            </section>
        </div>
        <div class="ant-col ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="components-back-top-demo-custom" data-v-172513ea="">
                <section class="code-box-demo">
                    <div id="components-back-top-demo-custom" data-v-172513ea="">
                        <!---->Scroll down to see the bottom-right <strong data-v-172513ea="" style="color: rgb(16, 136, 233);">blue</strong> button. </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#components-back-top-demo-custom">自定义样式</a></div>
                    <div class="code-box-description">
                        <p>可以自定义回到顶部按钮的样式，限制宽高：<code>40px * 40px</code>。</p>
                    </div>
                </section>
                <section class="highlight-wrapper">
                    <div class="highlight">
                        <pre class="language-vue" data-v-172513ea=""><code data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;</span>template</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
  <span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;</span>div</span> <span class="token attr-name" data-v-172513ea="">id</span><span class="token attr-value" data-v-172513ea=""><span class="token punctuation attr-equals" data-v-172513ea="">=</span><span class="token punctuation" data-v-172513ea="">"</span>components-back-top-demo-custom<span class="token punctuation" data-v-172513ea="">"</span></span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
    <span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;</span>a-back-top</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
      <span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;</span>div</span> <span class="token attr-name" data-v-172513ea="">class</span><span class="token attr-value" data-v-172513ea=""><span class="token punctuation attr-equals" data-v-172513ea="">=</span><span class="token punctuation" data-v-172513ea="">"</span>ant-back-top-inner<span class="token punctuation" data-v-172513ea="">"</span></span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>UP<span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;/</span>div</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
    <span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;/</span>a-back-top</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
    Scroll down to see the bottom-right
    <span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;</span>strong</span> <span class="token special-attr" data-v-172513ea=""><span class="token attr-name" data-v-172513ea="">style</span><span class="token attr-value" data-v-172513ea=""><span class="token punctuation attr-equals" data-v-172513ea="">=</span><span class="token punctuation" data-v-172513ea="">"</span><span class="token value css language-css" data-v-172513ea=""><span class="token property" data-v-172513ea="">color</span><span class="token punctuation" data-v-172513ea="">:</span> #1088e9</span><span class="token punctuation" data-v-172513ea="">"</span></span></span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>blue<span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;/</span>strong</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
    button.
  <span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;/</span>div</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
<span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;/</span>template</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span> 
<span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;</span>style</span> <span class="token attr-name" data-v-172513ea="">scoped</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span><span class="token style" data-v-172513ea=""><span class="token language-css" data-v-172513ea="">
<span class="token selector" data-v-172513ea="">#components-back-top-demo-custom .ant-back-top</span> <span class="token punctuation" data-v-172513ea="">{</span>
  <span class="token property" data-v-172513ea="">bottom</span><span class="token punctuation" data-v-172513ea="">:</span> 100px<span class="token punctuation" data-v-172513ea="">;</span>
<span class="token punctuation" data-v-172513ea="">}</span>
<span class="token selector" data-v-172513ea="">#components-back-top-demo-custom .ant-back-top-inner</span> <span class="token punctuation" data-v-172513ea="">{</span>
  <span class="token property" data-v-172513ea="">height</span><span class="token punctuation" data-v-172513ea="">:</span> 40px<span class="token punctuation" data-v-172513ea="">;</span>
  <span class="token property" data-v-172513ea="">width</span><span class="token punctuation" data-v-172513ea="">:</span> 40px<span class="token punctuation" data-v-172513ea="">;</span>
  <span class="token property" data-v-172513ea="">line-height</span><span class="token punctuation" data-v-172513ea="">:</span> 40px<span class="token punctuation" data-v-172513ea="">;</span>
  <span class="token property" data-v-172513ea="">border-radius</span><span class="token punctuation" data-v-172513ea="">:</span> 4px<span class="token punctuation" data-v-172513ea="">;</span>
  <span class="token property" data-v-172513ea="">background-color</span><span class="token punctuation" data-v-172513ea="">:</span> #1088e9<span class="token punctuation" data-v-172513ea="">;</span>
  <span class="token property" data-v-172513ea="">color</span><span class="token punctuation" data-v-172513ea="">:</span> #fff<span class="token punctuation" data-v-172513ea="">;</span>
  <span class="token property" data-v-172513ea="">text-align</span><span class="token punctuation" data-v-172513ea="">:</span> center<span class="token punctuation" data-v-172513ea="">;</span>
  <span class="token property" data-v-172513ea="">font-size</span><span class="token punctuation" data-v-172513ea="">:</span> 20px<span class="token punctuation" data-v-172513ea="">;</span>
<span class="token punctuation" data-v-172513ea="">}</span>
</span></span><span class="token tag" data-v-172513ea=""><span class="token tag" data-v-172513ea=""><span class="token punctuation" data-v-172513ea="">&lt;/</span>style</span><span class="token punctuation" data-v-172513ea="">&gt;</span></span>
</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
    <!---->
    <section class="markdown api-container">
        <h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2> 
        <blockquote>
            <p>有默认样式，距离底部 <code>50px</code>，可覆盖。</p>
            <p>自定义样式宽高不大于 40px * 40px。</p>
        </blockquote>
        <table class="docTable">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                    <th>版本</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>target</td>
                    <td>设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数</td>
                    <td>Function</td>
                    <td>() =&gt; window</td>
                    <td></td>
                </tr>
                <tr>
                    <td>visibilityHeight</td>
                    <td>滚动高度达到此参数值才出现 <code>BackTop</code></td>
                    <td>number</td>
                    <td>400</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <h3 id="事件">事件</h3>
        <table class="docTable">
            <thead>
                <tr>
                    <th>事件名称</th>
                    <th>说明</th>
                    <th>回调参数</th>
                    <th>版本</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>click</td>
                    <td>点击按钮的回调函数</td>
                    <td>Function</td>
                    <td></td>
                </tr>
            </tbody>
        </table> 
    </section>
</article>