Menu

キーワード

  • 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値のリセットがないと二度目にスクロールしてくれない。ただしこれだと履歴が汚れる。が、気にしないならこれで済む。

参考

スポンサーリンク