• RSS

[JS]一定量スクロールしてから「ページの先頭へ」ボタンを表示する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

jQueryで、ページをスクロールしたら「ページの先頭へ」のリンクを表示/非表示する方法のご紹介です。

「ページへ先頭へ」リンクは、ページを開いた時には表示されませんが、少しスクロールする(今回の例ではページ上部から100px)とフェードインで表示され、リンクを踏んでページ先頭へ戻るとフェードアウトで非表示になる、という動きになります。

Javascriptの記述例

<head>タグ内に以下の記述を追加します。
「ページへ先頭へ」リンクのクラスはpagetopにしています。
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function () {
        var s = $(this).scrollTop();
        var m = 100;
        if(s > m) {
            $(".pagetop").fadeIn('1000');
        } else if(s < m) {
            $(".pagetop").fadeOut('1000');
        }
    });
});
</script>
※fadeIn、fadeOutの値は1000にしていますが、ご利用のサイトに合わせて変更してみてください。


HTMLの記述例

「ページへ先頭へ」リンクを、ページのフッター要素の付近に記述します。
<div class="pagetop">
<a href="#top">ページの先頭へ</a>
</div>


CSSの記述例

「ページへ先頭へ」リンクをページ右下の固定表示させるます。
また、リンクの要素はdiplay:noneで非表示にしておきます。
.pagetop	{
	display:none;
	position:fixed;
	z-index:1000;
	right:40px;
	bottom:40px;
	}
	
.pagetop a	{
	display:block;
	}
※z-index、right、bottom の各値も、ご利用のサイトに合わせて変更してみてください。


以下のページにデモを用意しています。
一定量スクロールしてから「ページの先頭へ」ボタンを表示するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください