マテリアルデザインのトップにスクロールするボタンを実装できる『material-scrolltop』の使い方

phi phi on jQuery

@phpspot_kjさんのサイトエントリー

マテリアルデザインのスクロールトップに移動するボタンを実装できる「material-scrolltop」:phpspot開発日誌

で知って便利そうだったので使ってみました.

備忘録がてら使い方をまとめたのでよかったら参考にしてください.

material-scrolltop とは

マテリアルデザインのトップへのスクロールボタンを簡単に配置することができる jQuery プラグインです. 今風のスムーズな表示, スクロールが実現できます.

material-scrolltop デモ

簡単なデモを作ってみました. スクロールすると右下にボタンが出現し, 押すとトップにスクロールしてフワッと消えるのが分かるかと思います.

material-scrolltop の使い方

1. ライブラリを読み込む

jQuery と material-scrolltop.css, material-scrolltop.js を読み込みます.
cdnjs とかにはあがってなかったので rawgit で読み込みましょう♪

<!-- jquery -->  
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script>

<!-- material-scrolltop -->  
<link rel="stylesheet" href="http://cdn.rawgit.com/bartholomej/material-scrolltop/v0.6.4/src/material-scrolltop.css" />  
<script src="http://cdn.rawgit.com/bartholomej/material-scrolltop/v0.6.4/src/material-scrolltop.js"></script>  

2. ボタンを設置

html にスクロールボタン用の要素を設置します.

<!-- material-scrolltop button -->  
<button class="material-scrolltop" type="button"></button>  

3. JavaScript で初期化

下記のコードを実行することで有効になります.

$('body').materialScrollTop();

material-scrolltop のオプション

materialScrollTop には様々なオプションを指定できます.

$('body').materialScrollTop({
  padding: 100,               // スクロールしたさいのパディング
  revealElement: 'header',    // スクロール対象となる要素
  revealPosition: 'bottom',   // スクロールボタンの表示位置
  duration: 600,              // アニメーション時間
  easing: 'swing',            // アニメーションのイージング
  onScrollEnd: function() {   // アニメーション完了後のコールバック
    console.log('This is the end, my only friend, the end...');
  }
});

以上, 備忘録でしたー♪