「ページトップへ戻る」ボタンを実装するjQueryプラグイン「scrollUp」を導入した

お気づきの人もいるかもしれないが、gori.meはページトップに戻るボタンを導入した！

実は過去に一度実装したものの、あまり必要性を感じない上に邪魔で仕方がなかったので1週間ほどで外している。僕自身未だに必要性を感じていないが、その思いは僕だけなのか実際に必要とされている機能なのかを検証するために久しぶりに導入することにした。

使用したのは「scrollUp」というjQueryプラグイン。導入も簡単で手軽にオシャレなページトップへ戻るボタンを実装できるので、紹介する！

JSとCSSファイルをサーバーに置いて動かす！

参考にしたのはブログ＠コスモスフィアの記事。まずは公式ページの「Download」リンク先であるgithubページの「ZIP」からファイル一式をダウンロードしよう！

ファイルを解凍するといくつかフォルダに分かれていると思うが、使うのはJSファイルとCSSファイル、jQueryがサーバー上に設置されていない場合はjQueryファイルもサーバーにアップロードして設置するだけ。

具体的には以下のCSSファイルのいずれかと、

• css/themes/link.css
• css/themes/pill.css
• css/themes/tab.css

以下のjQueryファイルを、

• js/jquery.scrollUp.js

サーバーにアップロードしてHTMLソース内で指定するだけ。読み込み速度を考慮してCSSはhead内に、Javascriptはフッターの方に追記した。設置したファイルパスに基づいて「（ファイルパス）」の場所を変更するように！

    <link type="text/css" rel="stylesheet" href="/（ファイルパス）/css/themes/pill.css" />
 
    <script type="text/javascript" src="/（ファイルパス）/js/lib/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/（ファイルパス）/js/jquery.scrollUp.min.js"></script>
 
    <script type="text/javascript">
        // <![CDATA[
        $(function () {
            $.scrollUp();
        });
        // ]]>
    </script>

ちなみに上記はもっともシンプルな記述。Javascript部分を下記のように変更すれば動作や見た目を変更できるので、確認しておくべし！

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: '300', // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll to top', // Text for element
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
    });

});

個人的にはニョキッとした動きが可愛くてなんだかんだで気に入っているが、余計な記述を徹底的に排除したい僕として設置する意味があるかは未だに疑問である。効果は引き続き追って正しく分析できていそうであれば、記事として公開する予定。

僕の話はさておき、自サイトに「ページトップへ戻る」ボタンを実装したい人はとても簡単なので試してみるべし！

scrollUp jQuery plugin – Mark Goodyear