BackTop 回到顶部请使用手机扫码体验

用于较长的页面快捷回到顶部的组件。

基本用法

  1. html
    <nut-backtop>
  2. </nut-backtop>

设置出现位置

  1. html
    <nut-backtop 
  2.   :distance="400"
  3. >
  4. </nut-backtop>
“页面垂直方向滚动高度”后出现

click事件

  1. html
    <nut-backtop 
  2.   @click="onClick"
  3. >
  4. </nut-backtop>
  1. javascript
    export default {
  2.   methods: {
  3.     onClick() {
  4.       console.log("触发回到顶部按钮")
  5.     }
  6.   }
  7. };

设置样式

  1. html
    <nut-backtop 
  2.   :bottom="20"
  3.   :right="20"
  4.   :zIndex="10"
  5. >
  6. </nut-backtop>

设置动画持续时间

  1. html
    <nut-backtop 
  2.   :duration="1000"  
  3. >
  4. </nut-backtop>

Prop

字段说明类型默认值
duration设置动画持续时间Number1000
distance“页面垂直方向滚动高度”后出现Number200
bottom设置离页面底部距离Number30
right设置离页面右边距离Number30
zIndex设置层级Number1111

Event

字段说明回调参数
click按钮点击时触发-