小粋空間  -  a cheap joke and a play on words site

jQueryでスクロールでトップに「戻る」リンクを表示する「PageTop」プラグイン

jQueryでスクロールでトップに「戻る」リンクを表示する「PageTop」プラグインを公開します。

１．機能

ページのスクロールで右下に「戻る」を示すアイコンを表示します。

また、フッター部分が出現するとアイコンはフッターに固定されてスクロールします。

下記にサンプルを用意しました。

サンプル

サンプルをスクロールすると、通過するsection要素に対応するサイドメニューの該当項目を反転表示します。

２．プラグインのダウンロード

下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.pagetTop.js」にリネームしてください。

jquery.pageTop_0.0.1.js

以下、設定方法です。

３．HTML

body開始タグ直後に下記のdiv要素を追加します。

<div id="relative">

また、トップに戻るためのリンクをbody終了タグ直前に次のように記述します。a要素のテキストを表示したい場合は任意のテキストを記述してください。

<p class="pagetop"><a href="#"></a></p>

４．JavaScript

JavaScriptは次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.pageTop.js"></script>
<script>
$(function(){
    $("body").pageTop();
});
</script>

body要素に対してpageTop()を実行します。

５．オプション

pageTop()を実行時のオプションとして下記を用意しています。

• start：ボタンを表示を開始するスクロール量。デフォルトは"320"
• linkTarget：戻るボタンの属性。デフォルトは".pagetop"
• bottom：ページ下からの表示位置。デフォルトは"50"
• stopTarget：フッターの要素名。デフォルトは".footer"
• stopCSS：フッターに固定するときのセレクタ。デフォルトは"pagetop_absolute"

オプションは次のように設定してください。

jQuery(function() {
    jQuery('#foo').pageTop({
        start: 400,
        linkTarget: '.foo'
    });
});

６．CSS

次のCSSを設定してください。

#relative { position: relative; }
.footer  {
    margin: auto;
    background: #ccc;
    min-width: 980px;
}
.pagetop {
    position: fixed;
    right: 15px;
    bottom: -100px;
    font-size: 10px;
}
.pagetop a {
    display: block;
    width: 60px; /* アイコンの幅に合わせる */
    height: 60px; /* アイコンの高さに合わせる */
    background: transparent url("戻るアイコンのファイルのURL") no-repeat center 0;
}
.pagetop a:hover { opacity: 0.5; }
.pagetop_absolute {
    position: absolute;
    right: 15px;
    bottom: 560px !important;
}

設定についてはサンプルのソースコードを参考にしてください。