ページ先頭に戻るボタンの作成
ページトップに戻るボタンの作成方法です。
- HTML内に以下を記述します。私の場合は
wp_footerをコールする直前に記述しました。
<div id="page-top"><a href="#">TOPへ戻る</a></div>
- cssに以下を追加します。色や形状は好みに合わせて変更してください。
今回はpage-topに表示位置を、aタグに形状や文字のスタイルを設定しています。
/*--------------------------------
page top button
---------------------------------*/
#page-top {
bottom: 20px;
position: fixed;
right: 0;
z-index: 9999;
}
#page-top a {
background: #FF4081;
border-radius: 50%;
color: #fff;
display: block;
font-size: 10px;
height: 40px;
line-height: 20px;
padding: 10px 5px;
text-decoration: none;
text-align: center;
width: 50px;
}
#page-top a:hover {
text-decoration: none;
}
表示結果
今回は文字列ですが、最近はFont Awesomeなどを使うケースが多いですね。
一定量スクロールしてからボタンを表示させる方法
上記は常にボタンを表示する方法ですが、一定量スクロールしてからボタンを表示したい場合も多いと思います。以下はそのサンプルです。(jQueryを使用します)
page-topのスタイルに以下を追記します。
#page-top {
display: none;
}
<head>タグに以下を追記します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var offset = $( 'header' ).offset();
$(window).scroll(function() {
if ( $( window ).scrollTop() > offset.top ) {
$( '#page-top' ).css( 'display', 'block' )
} else {
$( '#page-top' ).css( 'display', 'none' )
}
});
});
</script>
ここではheaderタグが少しでも隠れたらボタンを表示するようにしています。もし、100pxスクロールしたらボタンを表示するようにしたい場合は、
$( window ).scrollTop() > offset.top
を
$( window ).scrollTop() > 100
とすればOKです。
