こんにちは。
櫻井です。
最近、jQueryを使わずにJSを書いているんですが、その中で「使わないでやるとなるとどうやるんだろう？」となったのがページ内リンクをアニメーションさせるJSでした。
今回は調べてみたら意外と簡単にできた、素のJSでスムーススクロールとも呼ばれるページ内リンクを押した時にアニメーションを付けて移動するJSの備忘録です。
スムーススクロール
See the Pen Untitled by knap_develp (@knap_develp) on CodePen.
やり方はまずhrefの「#」つまりページ内のIDが付与されているところに飛ぶ物を全て取得してlinksに入れます。
次にsmoothScrollに無名関数を定義していきます。
これはクリックされた時に走る関数なのでクリックした時に意図しない動作を起こさないようにデフォルトの動作をe.preventDefault();で消します。
次に定数を定義していきます。
hrefにクリックしたリンクの飛び先を入れます。
selectorにはhrefが#のみだった場合、または空だった場合はhtml、それ以外の場合はhrefがそのまま入ります。
targetElemはselectorを使用して要素を取得します。
もしtargetElemが空だったらsmoothScrollの関数はここで終わります。
rectにはtargetElemで取得した要素の寸法とビューポートに対する相対位置を入れます。
最後にpositionにビューポートに対するtopの相対位置とスクロールした距離を入れます。
これがスクロールして移動する位置になります。
次はスクロールする位置がわかったのでいよいよ場所を移動していきます。
window.scrollToでtopに先ほどpositionを渡します。
そしてアニメーションさせる上で一番大切なのがbehaviorにsmoothを渡すことです。
この設定でスルスルーと動いて移動してくれます。
逆にこれをしないと何も変わりません。
最後にlinksをforEachで回してsmoothScrollを各リンクがクリックされた時に発火するようにすれば出来上がりです。
