WordPress ではページをスクロールすると、画面右下に「トップへ戻る」ボタンが浮かび上がってきて、これが思いのほか便利。論文公開用の html ページも長くなるので、これを設置してみたい。
ボタンをつねに表示するのなら、この記事にあるように css をいじるだけで済むが、最初からずっと表示され続けてるのも不格好な気がする。となると、JavaScript を使ったほうがよいようで。
検索してざっと見回ってみたが、jQueryのライブラリを利用するものが多く、中でも次の記事がまさに初心者でもわかりやすかったので、このとおりに作ってみることにする。
.js のスクリプトはここからダウンロードしたものをほぼ流用。わかりやすいスクリプトなうえに、過剰な処理を防ぐ配慮まである。これをたとえば /example ディレクトリに置いて、jQuery で使うには html ページの <head>部に次のように入れ込む。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/example/to-top.js"></script>
あと大事なのがちゃんとページ冒頭に
<!DOCTYPE html>
を入れておくこと。これがないとうまくボタンが表示されない。最初はなぜかわからず、しばらく頭を抱えこんでいた。
ボタンの記述は適当なところに次のように入れておく。ここではアイコンに Font Awesome を使っているが、「▲」とか「↑」でも「ページ先頭へ」でもいい。
<div id="move-top" class="move-top">
<p><a id="btn-move-top" class="btn-move-top">
<span class="fa fa-angle-double-up"></span>
</a></p>
</div>
ボタンの表示位置やデザインは css で設定。今回はこんな感じで。
.move-top{
display: none;
margin: 0;
padding: 0;
}
.move-top p{
margin: 0;
padding: 0;
position: fixed;
right: 16px;
bottom: 10px;
}
.btn-move-top{
display: block;
background: #888;
padding: 10px 7px;
border-radius: 3px;
color: #fff ;
font-size: 22px;
text-decoration: none ;
text-align: center ;
-webkit-transition:all 0.3s ;
-moz-transition:all 0.3s ;
transition:all 0.3s ;
}
参考サイトの解説やスクリプトの記述がていねいでホント助かった。