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>