jQueryがあまりよくわかっていない@web_shufuです。そんな私でも、jQueryプラグイン「ScrollUp」を使えば、ページトップへのスクロールボタンを10分で設置できましたのでご紹介します。

プラグインダウンロード

まず、markgoodyear/scrollup ・ GitHubに行って、ZIPタブをクリックしてください。

これでダウンロードが完了します。その後すべて展開してください。

関連ファイルは全てscrollup-masterという名前のフォルダーに格納されています。

jquery.scrollUp.min.jsを編集

展開が終わったら、scrollup-master内のjsフォルダーの中にあるjquery.scrollUp.min.jsを編集します。

普段お使いのテキストエディタで、jquery.scrollUp.min.jsの末尾にカーソルを合わせ、enterボタン2連打で空白行を1行作ってください。

その後、空白行の下に以下を貼り付けて保存してください。

$(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'
    });
});

結果、jquery.scrollUp.min.jsはこんな感じになります。

アップロード

jquery.scrollUp.min.jsの編集が終わったら、サーバーのドメイン直下にjsフォルダーを作って、そこにアップロードしてください。

ドメインルートからのjquery.scrollUp.min.jsへの絶対パスは、/js/jquery.scrollUp.min.jsとなります。

</body>直前にjsファイルへのリンク

次に、</body>直前に、以下を挿入します。Wordpress Twentytwelveテーマの場合、</body>はfooter.phpにあります。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.scrollUp.min.js"></script>

※その後、テーマファイルのfunction.phpにてwp_enqueue_script関数を使って、リンクを設定し直しました。

ボタンにスタイルをあてる

あとは、ボタンにスタイルをあてれば、ボタンが見えるようになります。

自分で全くのオリジナルでスタイルをあてるのは大変なので、scrollup-master/css/theme/pill.cssにあるデフォルトのスタイルをとりあえずそのまま利用します。

以下のように、ページトップへのスクロールボタンには、scrollUpというidで以下のようなスタイルが定義されています。

#scrollUp {
    bottom: 20px;
    right: 20px;
    background: #555;
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    text-decoration: none;
    opacity: .9;
    padding: 10px 20px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-transition: background 200ms linear;
    -moz-transition: background 200ms linear;
    transition: background 200ms linear;
}
    #scrollUp:hover {
        background: #000;
    }

これを使っているテーマのstyle.cssに貼り付けます。Twentytwelveテーマをお使いの場合は

/* =Plugins
----------------------------------------------- */

の直後にでも貼り付ければいいでしょう。

style.cssとfooter.phpをftpアップロードしたら見事に「Scroll to top」ボタンが登場します。

ボタンの見栄えや挙動が不満な方は、style.cssと、jquery.scrollUp.min.jsのうち空白行を作って貼り付けた部分でカスタマイズすることが出来ます。

色々いじってみてもいいかもしれません。@web_shufuもそうしました。

最後に

ボタンの見栄えや挙動をデフォルトのままにすれば、分ほどで貼り付け作業が終了しま
す。

「ScrollUp」は、jQueryがあまりよくわかってなくても手軽に導入できるので、是非チャレンジしてみてください。