material-scrolltop是一款轻量级Material Design风格返回顶部jQuery插件。该返回顶部按钮有点击波特效，动画平滑过渡效果，并且通过参数可以配置各种滚动动画的easing效果。它的特点还有：
- 轻量级
- Material Design风格设计
- 带按钮点击波特效
- 平滑过渡动画
- 可配置外观样式
- 提供参数来控制动画
安装
可以通过bower来安装该返回顶部插件。
bower install material-scrolltop
使用方法
使用该返回顶部插件需要引入jQuery（1.7+）和material-scrolltop.js以及material-scrolltop.css。
<link rel="stylesheet" href="css/material-scrolltop.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="material-scrolltop.js"></script>
HTML结构
可以使用一个按钮<button>元素来制作返回顶部的按钮。
<button class="material-scrolltop" type="button"></button>
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该返回顶部插件。
<script>
$('body').materialScrollTop();
</script>
配置参数
| 参数 | 类型 | 默认值 | 描述 |
| revealElement | string | body | 页面滚动超过指定的元素的时候显示返回顶部按钮 |
| revealPosition | string | top | 返回顶部按钮的位置：'top'或'bottom' |
| padding | number | 0 | 调整上下的padding值，可以是负数 |
| duration | number | 600 | 滚动到顶部动画的持续时间 |
| easing | string | 'swing' | animate()动画的easing效果 |
| onScrollEnd | Function() | false | 当返回顶部动画结束后的回调函数 |
自定义
通过Sass文件，你可以轻易的修改默认的样式、颜色、位置等等属性。
如果需要修改SVG图标，可以将你的图标放入src/icons/目录下。
自定义文字或标记
如果需要自定义文字或标记，可以按下面步骤操作：
- 通过Sass文件的
$mst-icon: false变量关闭svg图标。 - 新建你自己的样式（不带图标）。
- 然后像下面这样将文字或标记放入一个
<span>标签中。<button class="material-scrolltop" type="button"> <span>↑</span> </button>
