ng-ytl-zorro-antd/src/showcase/nz-demo-back-top/nz-demo-back-top.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>BackTop 回到顶部</h1>
    <section class="markdown"><p>返回页面顶部的操作按钮。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a class="anchor">#</a>
      </h2>
      <ul>
        <li><p>当页面内容区域比较长时；</p></li>
        <li><p>当用户需要频繁返回顶部查看相关内容时。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本'" id="components-back-top-demo-basic" [nzCode]="NzDemoBackTopBasicCode">
        <nz-demo-back-top-basic demo></nz-demo-back-top-basic>
        <div intro>
          <p>最简单的用法。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'自定义样式'" id="components-back-top-demo-custom" [nzCode]="NzDemoBackTopCustomCode">
        <nz-demo-back-top-custom demo></nz-demo-back-top-custom>
        <div intro>
          <p>可以自定义回到顶部按钮的样式，限制宽高：<code>40px * 40px</code>。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'滚动容器'" id="components-back-top-demo-target" [nzCode]="NzDemoBackTopTargetCode">
        <nz-demo-back-top-target demo></nz-demo-back-top-target>
        <div intro>
          <p>设置 <code>[nzTarget]</code> 参数，允许对某个容器返回顶部。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <a class="anchor">#</a>
    </h2>
    <h3 id="BackTop"><span>nz-back-top</span>
      <a class="anchor">#</a>
    </h3>
    <blockquote>
      <p>有默认样式，距离底部<code>50px</code>，可覆盖。</p>
      <p>自定义样式宽高不大于 40px * 40px。</p>
    </blockquote>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzTemplate</td>
          <td>自定义内容，见示例</td>
          <td>ng-template</td>
          <td></td>
        </tr>
        <tr>
          <td>nzVisibilityHeight</td>
          <td>滚动高度达到此参数值才出现 <code>nz-back-top</code></td>
          <td>number</td>
          <td>400</td>
        </tr>
        <tr>
          <td>nzClick</td>
          <td>点击按钮的回调函数</td>
          <td>function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzTarget</td>
          <td>设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数</td>
          <td>Element</td>
          <td><code>window</code></td>
        </tr>
      </tbody>
    </table>
  </section>
</article>