ページのトップに戻るボタンを作成(jQuery)

ページのトップに戻るボタンを作成します。

はじめに

ページのトップに戻るボタンをjQueryを使用して作成します。

jQueryの有効化

functions.phpに以下の記述を追加して、jQueryを使用可能にします。

function my_scripts() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

ページトップボタンを作成

footer.phpにページトップボタンを作成するコードを追加します。

	<p id="page-top"><a href="#wrap"><i class="fa fa-chevron-up"></a></p>
	<script>
	jQuery(function( $ ) {
	    var topBtn = $('#page-top');
	    topBtn.hide();
	    $(window).scroll(function () {
	        if ($(this).scrollTop() > 100) {
	            topBtn.fadeIn();
	        } else {
	            topBtn.fadeOut();
	        }
	    });
	    topBtn.click(function () {
	        $('body,html').animate({
	            scrollTop: 0
	        }, 500);
	        return false;
	    });
	    $(document).click(function(event) {
	            topBtn.fadeOut();
        });
	});
	</script>

ボタン表示のカスタマイズ

CSSでボタン表示を整えます。

#page-top {
    position: fixed;
    bottom: 16px;
    right: 16px;
    font-size: 77%;
    z-index:999;
}

#page-top a {
    background: rgba(96,96,96,0.2);
    text-decoration: none;
    color: #ffffff;
    width: 60px;
    padding: 16px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    border-color: rgba(144,144,144,0.2);
}

#page-top a:hover {
    text-decoration: none;
    background:  rgba(144,144,144,0.2);
    border-color: rgba(144,144,144,0.2);
}

おわりに

ページのトップに戻るボタンを作成しました。

関連記事(目次)

  1. インターネットで情報発信!

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)