Amaze UI

Web 组件

GoTop 回到顶部


回到顶部组件。fixed 主题会根据滚动条位置设定图标的显隐(大于 50px 时才显示)。

组件演示

default(居中按钮)

  <div data-am-widget="gotop" class="am-gotop am-gotop-default" >
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
          <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
  </div>

fixed(默认 Icon)

  <div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
          <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
  </div>

fixed(设置 Icon)

  <div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
    <a href="#top" title="">
          <i class="am-gotop-icon am-icon-hand-o-up"></i>
    </a>
  </div>

fixed(自定义图片)

  <div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
    <a href="#top" title="">
        <img class="am-gotop-icon-custom" src="http://amazeui.b0.upaiyun.com/assets/i/cpts/gotop/goTop.gif" />
    </a>
  </div>

使用方法

直接使用

  • 拷贝演示中的代码,粘贴到 Amaze UI HTML 模板(点此下载<body> 区域;
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 gotop,使用细节参照折叠面板组件

云适配 WebIDE

  • 将组件拖入编辑界面;
  • 点击右侧面板里的【数据采集】按钮,按以下格式采集数据。
var data = {
  "title":      "回到顶部"      // 显示文字(某些主题不显示)
  "icon":       "arrow-up"    // 图标名称,使用内置的 Icon Font
  "customIcon": ""          // 自定义图标 URL
};

return data;

数据接口

{
  "id": "",

  "className": "",

  "theme": "default",

  "content": {
    "title":      "回到顶部"      // 显示文字(某些主题不显示)
    "icon":       "arrow-up"    // 图标名称,使用内置的 Icon Font
    "customIcon": ""          // 自定义图标 URL
  }
}
侧栏导航
Amaze UI 微信
在微信上关注我们