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

Javascriptスニペット

2015.03.26

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

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

Javascriptの記述例
HTMLの記述例
CSSの記述例

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>

$(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>

<a href="#top">ページの先頭へ</a>

</div>

CSSの記述例

「ページへ先頭へ」リンクをページ右下の固定表示させるます。
また、リンクの要素はdiplay:noneで非表示にしておきます。

.pagetop	{
	display:none;
	position:fixed;
	z-index:1000;
	right:40px;
	bottom:40px;
	}
	
.pagetop a	{
	display:block;
	}

.pagetop {

display:none;

position:fixed;

z-index:1000;

right:40px;

bottom:40px;

}

.pagetop a {

display:block;

}

※z-index、right、bottomの各値も、ご利用のサイトに合わせて変更してみてください。

以下のページにデモを用意しています。

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