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

Movable Typeの公式配布テーマ「Rimo」のスタイルシートを確認すると、テンプレートの何処にも使われていない指定を発見。縦スクロールが長いページで便利な「トップへ戻る」リンク用の記述だ。

8304.png

せっかくなので、小細工を加えた上で実装しよう。

テンプレート

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

<div id="page-top">
<a href="#"><i class="fas fa-angle-double-up"></i></a>
</div>

アイコンはFont Awesomeを利用。<i>~</i>の部分は、他アイコンや「TOP」など文字表記にするも自由。

スタイルシート

設置場所の数値を若干修正。ボタンに色を付け、円形にしてみた。

#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を使用するのが前提のため、未実装の場合は別途用意。

以下を記したファイル「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>

表示結果

実際に当サイトで見て頂くとして、まずはパソコン。

8305.png

タブレット。円がひしゃげているのはスルーで。

8306.png

スマートフォン。

8307.png

公式さんはテンプレートに記述し忘れたまま、リリースしてしまったのだろうか。無くても困らないから、気付かないという代物ではある。しかし、テーマ「Rimo」のスタイルシートには、謎というか無駄が他にも……

share