[JS]一定量スクロールしてから「ページの先頭へ」ボタンを表示する方法｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

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

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

1 Javascriptの記述例
2 HTMLの記述例
3 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>

※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 の各値も、ご利用のサイトに合わせて変更してみてください。

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

スポンサード

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

Javascriptの記述例

HTMLの記述例

CSSの記述例

コメント

コメントを残すコメントをキャンセル

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

Javascriptの記述例

HTMLの記述例

CSSの記述例

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル