ページ先頭に戻るボタンの作成|WordPress Theme作成

   

ページトップに戻るボタンの作成方法です。

  1. HTML内に以下を記述します。私の場合はwp_footerをコールする直前に記述しました。
<div id="page-top"><a href="#">TOPへ戻る</a></div>
  1. 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;
}
表示結果

TOPへ戻るボタン

今回は文字列ですが、最近はFont Awesomeなどを使うケースが多いですね。

一定量スクロールしてからボタンを表示させる方法

上記は常にボタンを表示する方法ですが、一定量スクロールしてからボタンを表示したい場合も多いと思います。以下はそのサンプルです。(jQueryを使用します)

  1. page-topのスタイルに以下を追記します。
#page-top {
  display: none;
}
  1. <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です。

 - WordPress