参考
回到顶部 Back Top
BackTop:回到顶部按钮。页面滚动超过 `threshold` 后,小型浮动按钮出现在页面角落,并把使用者带回顶部。滚动保持原生行为——`window.scrollTo` 遵循样式表的 `scroll-behavior: smooth`;reduced motion 会改回即时跳转(自带滚动容器的控件没有样式表可遵循,因此直接查询 media query)。两种情况下按钮都保持挂载,进场走过渡而不是突然出现。控件复用共享 `Button`(outline、方形);纸面、发丝线和聚焦光晕由它提供,这个家族只负责浮动和进场。
Root
#BackTop
BackTop:回到顶部按钮。页面滚动超过 threshold 后,小型浮动按钮出现在页面角落,并把使用者带回顶部。滚动保持原生行为——window.scrollTo 遵循样式表的 scroll-behavior: smooth;reduced motion 会改回即时跳转(自带滚动容器的控件没有样式表可遵循,因此直接查询 media query)。两种情况下按钮都保持挂载,进场走过渡而不是突然出现。控件复用共享 Button(outline、方形);纸面、发丝线和聚焦光晕由它提供,这个家族只负责浮动和进场。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
threshold | Number | 400 | — |
label | String | "Back to top" | — |
scrollEl | Function | undefined | — |