hashの追加について location.hash history.pushState

popstateも起きるので追加しないと・・・

location.hashでハッシュを付与したとき

onhashchange, onscroll片方のみ起きる、両方起きる、両方起きないの４パターン

1. 現在のハッシュと代入するハッシュが
   • 異なる … ハッシュが変わり(onhashchange)、履歴が追加される。CSS-target疑似クラスがあればそれが有効になる。2へ
   • 同じ … 2へ
2. ハッシュと同じIDの要素が
   • ある or 代入するハッシュが#のみ, #top
     • 現在の位置とその要素の位置が
       • 異なる … 移動する (onscroll)
       • 同じ … 終わり
   • ない … 終わり

history.pushStateでハッシュを追加したとき

• スクロールイベントは起こらない
• target疑似クラスが有効にならない
• 追加時にはonhashchangeが起きない
• ただし、pushStateした後の戻る/進むではonhashchangeが起きる
• 同じハッシュでも履歴が追加される

pushStateでは同じハッシュの履歴が連続しないように注意。

---

hashを付与する方法

location.hash = "#a"
location.href = "#a"
location.assign("#a")
location.replace("#a") // 戻れない

history.pushState(null, null, "#a")
history.replaceState(null, null, "#a")