はじめてのJavaScript 〜スムーズスクロール〜

けろ🐸です。

サークルのチーム制作サイトでページ内リンクのスムーズスクロールをさせたのでその備忘録を書きたいと思います。

JavaScriptはProgateや本で少ししか触ってないので、少し見にくいコードになっているかもしれません。

今回のスムーズスクロール

・ナビ内のリンクをクリック（タップ）するとウインドウ をリンク先までスクロールさせる

・Safariでは動かない（また後日Safariで動く物もまとめようと思います。）

・jQuery非依存の完全素のJavaScript

サンプルコード

<nav>~</nav>内の<a>タグをクリックするとその要素までスクロールするコードです。

・11行目〜14行目

11行目-let navOne = document.getElementById('one');

クリックする要素を取得

12行目-let one = document.getElementById('one');

クリック先の要素を取得

13行目-let oneY = one.getBoundingClientRect().top;

クリック先要素の最上部位置取得

14行目-headScroll(navOne,oneY);

headScroll関数にクリックする要素とクリック先要素の最上部位置を引数として渡す

・2行目：elem.addEventListener('click', (e) => {...}

elemがクリックされたら{}内の処理開始

・3行目：e.preventDefault();

要素がクリックされた際のイベントを消す

・5行目〜6行目

5行目-top: elemY,

画面上部をelemYまでウインドウをスクロールさせる

6行目-behavior: 'smooth'

スクロールさせる際の動きを滑らかにする

（ここがSafariには対応していないので、Safariではスムーズな動きにならない模様です。対応している主なブラウザはChrome(Android含む)とFirefoxのみ）

サンプルサイト

以上けろ🐸でした