キーワード†
- JavaScript
- hash
- ページ内リンク
- アニメーション
したいこと†
ページ内リンクをアニメーションしてスクロールさせたい。簡単に。
どうやって†
htmlにスクロール先をマーキングして、
<a name="pageTop"></a>
クリックでリンクするなら普通にアンカーリンク。
<a href="#pageTop">page top</a>
JavaScriptでリンクするならhashの値を変更。
window.location.hash = "" window.location.hash = "pageTop"
cssでscroll-behaviorをsmoothにセットしておくとアニメーションできる。
#scroll-container {
scroll-behavior: smooth;
}
ちなみに†
JavaScriptでリンクするときに
window.location.hash = ""
としているのは、JavaScriptで二度続けて同じページ内リンクをできるようにするため。hash値のリセットがないと二度目にスクロールしてくれない。ただしこれだと履歴が汚れる。が、気にしないならこれで済む。