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

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

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

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



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

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

Github
ファイルを解凍するといくつかフォルダに分かれていると思うが、使うのは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

オススメ

gori.meの最新情報をチェック!!

  1. 【大悲報】2017年のiPhone、「iPhone 7s」と「iPhone 7s Plus」に?!
  2. 「iOS 10.2 Beta 7 / Public Beta 7」、配信開始
  3. App Store、2016年11月に過去最高の売上高を記録
  4. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  5. ポケモンGO、新ポケモンの追加を12月12日に発表することを正式に予告