[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp

HTMLは一切変更せずに、スクロールに追従するページの先頭へ戻るボタンが簡単に設置できるjQueryのプラグインを紹介します。

scrollUp jQuery plugin
scrollUp -GitHub

• scrollUpのデモ
• scrollUpの使い方

scrollUpのデモ

デモページ

先頭へ戻るボタンは、テキストリンク、ピル・タブのデザインが用意されています。
デモでは、右下に表示されます。

デモページ：テキストリンク

デモページ：ピル

デモページ：タブ

scrollUpの使い方

実装は非常に簡単です。

Step 1: 外部ファイル

「jquery.jsと当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.js"></script>

デザインをそのまま使用する場合は、スタイルシートもテーマごとに用意されています。

<link id="scrollUpTheme" rel="stylesheet" href="css/themes/link.css">
<link id="scrollUpTheme" rel="stylesheet" href="css/labs.css">

Step 2: scrollUpの配置

scrollUpを配置するページにスクリプトを記述するだけです。

<script>
$(function () {
    $.scrollUp();
});
</script>

スクリプトのオプション

スクリプトのオプションでは追従するエレメントのidを変更したり、スピードやアニメーションを調整できます。

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // エレメントのid
        topDistance: '300', // scrollUpを表示するトップからの距離 (px)
        topSpeed: 300, // トップに戻るスピード (ms)
        animation: 'fade', // アニメーションの種類 (Fade, slide, none)
        animationInSpeed: 200, // アニメーションの最初のスピード (ms)
        animationOutSpeed: 200, // アニメーションの最後のスピード (ms)
        scrollText: 'Scroll to top', // エレメントに表示するテキスト
        activeOverlay: false, // scrollUp動作時のオーバーレイのカラー, e.g '#00FFFF'
    });

});

スタイルの変更

追従するエレメントのスタイルを変更する際は、下記のようにします。

#scrollUp {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #555;
    color: #fff;
}