ea-ui

Backtop 回到顶部 ​

返回页面顶部的操作按钮

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-backtop/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

滑动页面即可看到右下方的按钮。

查看代码
html
<ea-backtop><ea-icon icon="icon-angle-up"></ea-icon></ea-backtop>

自定义触发元素 ​

UP

滑动该区域即可看到右下方的按钮。

滑动该区域即可看到右下方的按钮。

滑动该区域即可看到右下方的按钮。

滑动该区域即可看到右下方的按钮。

滑动该区域即可看到右下方的按钮。

显示代码
html
<ea-backtop target="#hasTarget" bottom="120px">UP</ea-backtop>

<div class="demo" id="hasTarget" style="height: 50px; overflow: auto;">
  <p>滑动该区域即可看到右下方的按钮。</p>
  <p>滑动该区域即可看到右下方的按钮。</p>
  <p>滑动该区域即可看到右下方的按钮。</p>
  <p>滑动该区域即可看到右下方的按钮。</p>
  <p>滑动该区域即可看到右下方的按钮。</p>
</div>

自定义滚动到的视距 ​

视距

滑动页面大约 50px 即可看到右下方的按钮。

查看代码
html
<ea-backtop bottom="200px" visibility-height="500">视距</ea-backtop>

<div class="demo">
  <p>滑动页面大约 50px 即可看到右下方的按钮。</p>
</div>

Attributes ​

参数说明类型可选值默认值
target触发滚动的对象String--
right按钮距右侧距离Number-40
bottom按钮距底部距离Number-40
visibility-height滚动到该高度才显示Number-200

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
containerbacktop 外层容器

Events ​

事件名称说明回调参数
backtop点击按钮时触发-
reachedTop滚动到顶部时触发-