GoTop
This widget create an button to help users to go back to the top. When using fixed style, the visibility of button will be determined by the position of scroll bar. (Visible only when it is over 50px away from top).
TOC
Demos
Theme: 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>
Theme: fixed
<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>
Theme: fixed
<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>
Theme: 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>
Usage
Copy and Paste
- Copy the codes in examples, and paste it to the
<body>of the Amaze UI HTML template(Download); - Replace the contents in examples with your own contents.
Using Handlebars
The Handlebars partial of this widget is gotop. See Accordion for more details.
Allmobilize WebIDE
- Drag the widget to the edit interface;
- Click the
Data bindingbutton on the right panel, and bind data using following format.
var data = {
"title": "Go top" // Title (not shown in some styles)
"icon": "arrow-up" // Name of icon. Use Icon Font.
"customIcon": "" // URL of customized icon.
};
return data;Data Interface
{
"id": "",
"className": "",
"theme": "default",
"content": {
"title": "Go top" // Title (not shown in some styles)
"icon": "arrow-up" // Name of icon. Use Icon Font.
"customIcon": "" // URL of customized icon.
}
}