【jQuery】スクロールボタンプラグインMaterial ScrollTop Button

material-scrolltop-animation

Material ScrollTop Buttonは軽量のスクロールトップボタンを実装するjQueryプラグイン。
クリックした時の波及効果も付いています。

CSS

<link rel="stylesheet" href="css/material-scrolltop.css">

Button

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

JS

jQuery本体は1.7以上を使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- material-scrolltop plugin -->
<script src="js/material-scrolltop.js"></script>
<!-- Initialize material-scrolltop with (minimal) -->
<script>
$('body').materialScrollTop();
</script>

Settings

revealElement 特定の要素の上にスクロール
revealPosition ボタンを表示する要素位置
padding paddingの調整
duration アニメーションが実行される時間の長さ
easing 遷移アニメーション
onScrollEnd アニメーションが完了すると、呼び出す関数

Example

$('body').materialScrollTop({   // Scroll to the top of <body> element ...
padding: 100,               // ... and add padding 100px
revealElement: 'header',    // Reveal button when scrolling over <header> ...
revealPosition: 'bottom',   // ... and do it at the end of </header> element
duration: 600,              // Animation will run 600 ms
easing: 'swing',            // Do it with swing animation
onScrollEnd: function() {   // Give me some log when animation ends
console.log('This is the end, my only friend, the end...');
}
});
 
Material ScrollTop Button

【jQuery】スクロールボタンプラグインMaterial ScrollTop Button

  • LATEST
  • RELATED
  • POPULAR