3.3.4 backToTop

说明: 给用户提供一个快速返回顶部的便捷通道

使用及参数说明:

xui.backToTop({
    id: string,
    target: string || array,
    cusClass: string,
    title: string,
    step: number,
    right: string,
    bottom: string,
    isAnimated: boolean,
    fn: callback,
});

• 传入相关参数, 初始化即可使用
• id表示返回顶部组件的id
• target表示需要返回顶部的目标元素, 默认为body, 如果滚动条不在body上就设置, 如果有多个用数组展示(响应式布局里会出现)
• cusClass表示返回顶部组件的样式名
• title表示返回顶部的文案展示, 支持传标签, 默认为返回顶部文案
• right表示返回顶部的位置, 支持%, px
• bottom表示返回顶部的位置, 支持%, px
• isAnimated表示返回顶部是否带有阴影动画, 默认为true
• step表示返回顶部的速度, 数值越大返回越快, 默认值100
• fn表示返回顶部的回调, 返回到了顶部时触发
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.看一看最简单的配置, 初始化即可

new xui.backToTop({
    target: ['book-body', 'body-inner'],
});

2.我们提供了丰富的配置, 可以挨个试试

new xui.backToTop({
    id: 'xumeng',
    target: ['book-body', 'body-inner'],
    cusClass: "custom-class",
    right: '50px',
    title: '<span style="color: red">返<br/>回<br/>顶<br/>部</span>',
    step: 50,
    bottom: '200px',
    fn(){
        xui.message('finished');
    }
});

为了页面有滚动条,特地摘录了一段话

寓形宇内复几时，曷不委心任去留？

胡为乎遑遑欲何之？

富贵非吾愿，帝乡不可期。

怀良辰以孤往，或植杖而耘耔。

登东皋以舒啸，临清流而赋诗。

聊乘化以归尽，乐夫天命复奚疑！

——节选自陶渊 《归去来兮辞》