キーワード

したいこと

ページ内リンクをアニメーションしてスクロールさせたい。簡単に。

どうやって

htmlにスクロール先をマーキングして、

<a name="pageTop"></a>

クリックでリンクするなら普通にアンカーリンク。

<a href="page/JavaScript/ページ内リンクをアニメーションでスクロールする.html#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値のリセットがないと二度目にスクロールしてくれない。ただしこれだと履歴が汚れる。が、気にしないならこれで済む。

参考

Last-modified: 2018-04-12 (木) 19:16:35 (528d)