いろんなブログを読んでいると、右下に「上に戻るボタン」がよく表示されていたので、私も試行錯誤の上、作成してみました。
でも、PCでの表示はよかったんですが、スマホ表示を確認すると邪魔だなあと思いました。
間違ってタップしてしまいそう。
では、PCだけ表示するようにしようかと思ったんですが、PCはHomeボタンで「上までスクロールする」ことができることを知り、わざわざボタンを作る必要はなかったんだなあと。(ちなみにEndボタンで「下までスクロールする」)
あまり長い記事を作成することもないだろうから、もういいかなあと、「上に戻るボタン」をつけることを見送っていましたが…。
今度は、記事の外にではなく記事内に、ボタンではなくリンクでつくりたいと思いました。
ちなみに、ただ単に上(トップ)まで戻る場合は、
<p><a href="#top">ページ上部へ戻る</a></p>
とHTMLに記載すれば、
と上に戻るリンクが作成されます。
リンクを右端に表示したい場合は、
<p style="text-align: right;"><a href="#top">ページ上部へ戻る</a></p>
とすれば、
このように右端に表示されます。
しかし、今回やりたいのは、目次のついた記事を書いたときに、ページ上部ではなく、目次の位置に戻るリンクを作りたい。
この場合、特定の場所に飛ばす方法で、
リンク元
<a href="#アンカー名(英数字)">文字など</a>
リンク先
<p id="アンカー名(英数字)">文字など</p>
これを基本に考えます。
HTML編集で、目次は
<p>[:contents]</p>
と表示されています。
最初はこの目次の行を使ってみましたが、微妙な戻り位置とか、うまくいかないことがあったので、目次の一つ上の行を使うことにしました。
(前文→目次→本文の流れになるはずなので、目次の前には行があると思う。)
リンク元
<p style="text-align: right;"><a href="#mokuji">目次へ戻る</a></p>
リンク先
<p id="mokuji"></p>
<p>[:contents]</p>
これで作成すれば、だいたいの目次の位置に戻るリンクが作れるはず。