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

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

Posted at December 8,2014 2:55 AM
Tag:[jQuery, Plugin]

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

1.機能

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

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

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

サンプル

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

2.プラグインのダウンロード

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

jquery.pageTop_0.0.1.js

以下、設定方法です。

3.HTML

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

<div id="relative">

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

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

4.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()を実行します。

5.オプション

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

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

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

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

6.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;
}

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)