今日の日和

日常の気になったことや覚書とか

目次に戻るためのページ内リンクをつくる

スポンサーリンク

f:id:ariakesumire:20181101122900j:plain

いろんなブログを読んでいると、右下に「上に戻るボタン」がよく表示されていたので、私も試行錯誤の上、作成してみました。

でも、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>

これで作成すれば、だいたいの目次の位置に戻るリンクが作れるはず。