ページトップに戻るボタンの設置(ページ最下部へ飛ぶボタンを追加しました)

｜2024/06/27
アイキャッチ

このウィジェットについて

jQuery を使用します。

Font Awesome のウェブアイコンを使用します。

CSS はお好みで適宜変更して下さい。

テーマ編集は必ず予めバックアップを取ってから行って下さい。

Font Awesome の導入

以下のコードをテーマの HTML編集画面にて </head>の上に置いて下さい。 

<link href='https://use.fontawesome.com/releases/v5.14.0/css/all.css' rel='stylesheet' type='text/css'/>

スクリプトコードの設置

以下のコードをテーマの HTML編集画面にて </body>の上にコピペします。

既に jQuery を導入済みの場合は2行目のタグは不要。

<!--ページトップボタン-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<script>
//<![CDATA[
$(function() {
    var pagetop = $('#pagetop');
    var toTop = 1000;//ページトップヘの到達時間(ミリ秒)
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1300) {//ボタン出現位置(px)
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        $('body, html').animate({ scrollTop: 0 }, toTop);
        return false;
    });
});
//]]>
</script>
<style>
#pagetop {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    color: #6495ed;
    z-index: 99;
}
#pagetop span {
    transition: .5s;
    opacity: .5;
}
#pagetop span:hover {
    cursor: pointer;
    opacity: 1;
}
</style>
<p id="pagetop"><span><i class="fas fa-chevron-circle-up fa-3x"></i></span></p>

アイコンサンプル

使えそうなアイコンの一例です。

 <i class="fas fa-chevron-circle-up fa-3x"></i>
 <i class="fas fa-arrow-circle-up fa-3x"></i>
 <i class="fas fa-arrow-alt-circle-up fa-3x"></i>
 <i class="fas fa-caret-square-up fa-3x"></i>

その他はここでお好みのものを探してみて下さい。

Icons | Font Awesome

2020/10/07 追記: ページ最下部へ飛ぶボタンを追加

試行錯誤した結果、上にジャンプするボタンと下にジャンプするボタンの同時実装が上手くいきましたので、参考までにコードを載せておきます。

上下にジャンプボタン

全くの素人が見様見真似で書いたコードなため、おかしな点等あるかもしれませんので悪しからず。

<!--上下にジャンプボタン-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<script>
//<![CDATA[
$(function() {
    var pagetop = $('#pagetop');
    var pagebottom = $('#pagebottom');
    var toTop = 1000;//最上部ヘの到達時間(ミリ秒)
    var toBottom = 1000;//最下部ヘの到達時間
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1000) {
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
        if ($(this).scrollTop() > 0 && $(this).scrollTop()<$(document).height()-1200) {
            pagebottom.fadeIn();
        } else {
            pagebottom.fadeOut();
        }
    });
    pagetop.click(function () {
        $('body, html').animate({ scrollTop: 0 }, toTop);
    });
    pagebottom.click(function () {
       $('body, html').animate({ scrollTop: $(document).height()}, toBottom);
    });
});
//]]>
</script>
<style>
#pagetop,
#pagebottom {
    display: none;
    position: fixed;
    right: 0;
    color: #6495ed;
    z-index: 99;
}
#pagetop {
    bottom: 80px;
}
#pagebottom {
    bottom: 20px;  
}
#pagetop span,
#pagebottom span {
    transition: .5s;
    opacity: .5;
}
#pagetop span:hover,
#pagebottom span:hover {
    cursor: pointer;
    opacity: 1;
}
</style>
<p id="pagetop"><span><i class="fas fa-chevron-circle-up fa-3x"></i></span></p>
<p id="pagebottom"><span><i class="fas fa-chevron-circle-down fa-3x"></i></span></p>

2024/06/27 追記: jQuery 不使用版コード

Google Gemini に jQuery を使わないコード(Vanilla)に変換してもらいました。当ブログのボタンもこちらに変えています。

jQuery 版との違い

到達時間の調整はできません。ボタンのフェードイン・フェードアウト効果はありません。HTML はスクリプトよりも上に置かないと動きません。

  <!--上下にジャンプボタン-->
<p id='pagetop'><span><i class='fas fa-chevron-circle-up fa-3x'/></span></p>
<p id='pagebottom'><span><i class='fas fa-chevron-circle-down fa-3x'/></span></p>
<script>
//<![CDATA[
window.addEventListener('scroll', function() {
  const pageTop = document.getElementById('pagetop');
  const pageBottom = document.getElementById('pagebottom');
  const scrollTop = window.pageYOffset;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  if (scrollTop > 1000) {
    pageTop.style.display = 'block';
  } else {
    pageTop.style.display = 'none';
  }
  if (scrollTop > 0 && scrollTop < documentHeight - windowHeight - 1200) {
    pageBottom.style.display = 'block';
  } else {
    pageBottom.style.display = 'none';
  }
});
document.getElementById('pagetop').addEventListener('click', function() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
document.getElementById('pagebottom').addEventListener('click', function() {
  window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
});
//]]>
</script>
<style>
#pagetop,
#pagebottom {
  display: none;
  position: fixed;
  right: 0;
  color: #6495ed;
  z-index: 99;
}
#pagetop {
  bottom: 80px;
}
#pagebottom {
  bottom: 20px;  
}
#pagetop span,
#pagebottom span {
  transition: .5s;
  opacity: .5;
}
#pagetop span:hover,
#pagebottom span:hover {
  cursor: pointer;
  opacity: 1;
}
</style>