ページトップへ戻るボタンを設置

縦スクロールが長いページで便利な「トップへ戻る」リンクを設置。テンプレートテ...

縦スクロールが長いページで便利な「トップへ戻る」リンクを設置。

テンプレート

テンプレートに追記。最下部、</body>の直前辺りで良いだろう。

<div id="page-top">
<a href="#"><img src="/img/icon.gif"></a>
</div>

当サイトではFont Awesomeのアイコンを利用。画像ではなく「TOP」など文字表記にするも自由。

<div id="page-top">
<a href="#"><i class="fa-solid fa-angles-up"></i></a>
</div>

スタイルシート

リンクボタンに色を付け、円形にしてみた。

#page-top{
position: fixed;
right: 20px;
bottom: 30px;
}
#page-top a{
font-size: 1.5em;
color: #669999;
background-color: #f5f5f5;
text-align: center;
text-decoration: none;
padding: 5px 15px;
border-radius: 50%;
}

Java Script

ここでもう一手間。初見では画面に無い状態とし、スクロールした時に表示されるよう細工。このスクリプトは動きも緩やか。尚、jQuery.jsを使用するのが前提のため、未実装の場合は別途用意。

参考：jQueryでスクロールすると表示する系いろいろ | webOpixel

以下を記したファイル「page-top.js」を作成。既存のjsファイルに追記するも可。

$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});

各ファイルをサーバーに転送、テンプレートの<header>～</header>内に設置環境を追記。

<script src="/jquery.js"></script>
<script src="/page-top.js"></script>

Movable Typeの公式配布テーマ「Rimo」のスタイルシートを確認した際、テンプレートの何処にも使われていない指定を発見したのが発端。

公式さんはテンプレートに記述し忘れたまま、リリースしてしまったのだろうか。無くても困らない代物ではあるが……

posted on August 7, 2021

240607-240615