Backtop 回到顶部

使用说明 JS

Backtop部件是一组工具按钮，通过该部件可快速进行一些操作，比如回到顶部。当向下一定高度之后（本框架定义的是400px,用户可自行修改js代码中的数值），右下角Backtop部件会升起返回顶部的按钮。涉及的JS包括滚动距离判断和返回顶部。

基本结构如下：

<ul class="ax-backtop">
    <li class="ax-item ax-image"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a><span class="ax-dot"></span><span class="ax-text">24小时客服</span></li>
    <li class="ax-item ax-load"><a></a></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
    <li class="ax-item ax-social"><a href="###" class="ax-iconfont ax-icon-share"></a><span class="ax-text"><a href="###" class="ax-iconfont ax-icon-wechat-fill"></a><a href="###" class="ax-iconfont ax-icon-weibo-fill"></a><a href="###" class="ax-iconfont ax-icon-facebook-fill"></a><a href="###" class="ax-iconfont ax-icon-twitter-fill"></a></span></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span class="ax-text"><img src="https://src.axui.cn/v1.0/examples/images/qrcode.png"></span></li>
    <li class="ax-item ax-totop"><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>

大尺寸 JS

使用ax-lg类，可变为56px宽高的按钮。

<ul class="ax-backtop ax-lg">
    <li class="ax-item ax-image"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a><span class="ax-dot"></span><span class="ax-text">24小时客服</span></li>
    <li class="ax-item ax-load"><a></a></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
    <li class="ax-item ax-social"><a href="###" class="ax-iconfont ax-icon-share"></a><span class="ax-text"><a href="###" class="ax-iconfont ax-icon-wechat-fill"></a><a href="###" class="ax-iconfont ax-icon-weibo-fill"></a><a href="###" class="ax-iconfont ax-icon-facebook-fill"></a><a href="###" class="ax-iconfont ax-icon-twitter-fill"></a></span></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span class="ax-text"><img src="https://src.axui.cn/v1.0/examples/images/qrcode.png"></span></li>
    <li class="ax-item ax-totop"><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>

直角方形按钮 JS

使用ax-square类表示正方形的按钮。

<ul class="ax-backtop ax-square">
    <li class="ax-item ax-image"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a><span class="ax-dot"></span><span class="ax-text">24小时客服</span></li>
    <li class="ax-item ax-load"><a></a></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
    <li class="ax-item ax-social"><a href="###" class="ax-iconfont ax-icon-share"></a><span class="ax-text"><a href="###" class="ax-iconfont ax-icon-wechat-fill"></a><a href="###" class="ax-iconfont ax-icon-weibo-fill"></a><a href="###" class="ax-iconfont ax-icon-facebook-fill"></a><a href="###" class="ax-iconfont ax-icon-twitter-fill"></a></span></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span class="ax-text"><img src="https://src.axui.cn/v1.0/examples/images/qrcode.png"></span></li>
    <li class="ax-item ax-totop"><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>

圆形按钮 JS

使用ax-round类表示圆形按钮。

<ul class="ax-backtop ax-round">
    <li class="ax-item ax-image"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a><span class="ax-dot"></span><span class="ax-text">24小时客服</span></li>
    <li class="ax-item ax-load"><a></a></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
    <li class="ax-item ax-social"><a href="###" class="ax-iconfont ax-icon-share"></a><span class="ax-text"><a href="###" class="ax-iconfont ax-icon-wechat-fill"></a><a href="###" class="ax-iconfont ax-icon-weibo-fill"></a><a href="###" class="ax-iconfont ax-icon-facebook-fill"></a><a href="###" class="ax-iconfont ax-icon-twitter-fill"></a></span></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span class="ax-text"><img src="https://src.axui.cn/v1.0/examples/images/qrcode.png"></span></li>
    <li class="ax-item ax-totop"><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>

焦点按钮 JS

使用ax-focus类表示焦点按钮。

<ul class="ax-backtop">
    <li class="ax-item ax-image ax-focus"><a href="###" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a><span class="ax-dot"></span><span class="ax-text">24小时客服</span></li>
    <li class="ax-item ax-load"><a></a></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
    <li class="ax-item ax-social"><a href="###" class="ax-iconfont ax-icon-share"></a><span class="ax-text"><a href="###" class="ax-iconfont ax-icon-wechat-fill"></a><a href="###" class="ax-iconfont ax-icon-weibo-fill"></a><a href="###" class="ax-iconfont ax-icon-facebook-fill"></a><a href="###" class="ax-iconfont ax-icon-twitter-fill"></a></span></li>
    <li class="ax-item"><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span class="ax-text"><img src="https://src.axui.cn/v1.0/examples/images/qrcode.png"></span></li>
    <li class="ax-item ax-totop"><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>