Webサイトでの目次の飛び方の違いについて

Question

目次の飛び方に違和感があるので変えたいです。

比較対象１のURL
https://webkikaku.co.jp/blog/attract/table-of-contents/
比較対象２のURL
https://room.trunk.fm/intern/7126

現在は１のような飛び方をするので到達が遅い上に戻るボタンで目次に戻れないです。
２のタイプだと、一瞬で目的の位置に到達して戻るボタンで目的に戻れます。

ざっとコードを調べたりググったりしてみたのですが、idやhrefなどのつけ方も同じで（もしそう見えただけならごめんなさい）、いまいち違いが判りませんでした。
２のような動きにするにはどうしたらいいでしょうか。

Answer 1

戻るボタンで戻れる場合と戻れない場合の違い

2のほうでは、目次を押すとURLに「#wo1」などが付いているのが分かるかと思います。
ただ、1のほうではURLに「#○○」がついて居ません。

2に関して、URLに「#wo1」が付いた状態で戻るボタンを押すと、付いていない状態に戻るかと思います。つまり、URLの「#wo1」が消え、目次を押す前の状態に戻るということです。

一方1では、#○○が付かない仕様になっているので、戻るボタンを押しても目次に戻りません。
おそらく、わざと#○○が付かないようにJavaScriptで制御しているものと思われます。

到達の早さに関して

到達が遅い1に関しては「スムーススクロール」というJavaScriptのアニメーションを用いているのでゆっくりスクロールしています。

2に関しては特にJavaScriptの制御が無いので、一瞬で目的のidに飛びます。

２のような動きにするにはどうしたらいいか

結論、普通にアンカーリンクを付ければ問題ないです。

<a href="#aaa">アンカーリンク目次</a>

<h2 id="aaa">目的のタイトル</h2>

一瞬で飛べますし、戻るで戻ることも可能です。

Comments

[kurisan1623]

どちらもJSでしたか。。
頑張ってみます。ありがとうございました！