GSAPでページ内リンクのスクロールを実装する方法

HTML

前田大地

2022年09月29日

今回ご紹介するのは、GSAPでページ内リンク（アンカーリンク）のスクロールを実装する方法です。

GSAPとは
ページ内リンクのスクロール
- 固定ヘッダーがある場合
コードの解説
やってみた感想

GSAPとは

GSAPは、アニメーションのためのJavascriptライブラリです。高速で堅牢、しかもJavascriptからアクセスできるほとんどの要素を操作できるので使用するフレームワークを選びません。Googleも推奨していて、業界標準と言えなくもない雰囲気です。アニメーション版のjQueryみたいなイメージでしょうか。GSAPの本体にプラスして「プラグイン」という追加機能を読み込めば、さらに色々なことができるようになります。

最近は私もなるべくGSAPを採用するようにしていますが、なぜ今までちまちまJavascriptやCSSでアニメーションさせていたのだろう・・・と、ちょっぴり悲しい気分になるほどです。

ページ内リンクのスクロール

GSAPを使ったアンカーリンクのスクロール。完成したコードがこちらです。

/* --------------------
smooth scroll
-------------------- */
gsap.utils.toArray('a[href^="#"]').forEach(function(a) {
  a.addEventListener("click", function(e) {
    e.preventDefault();
    const target = a.getAttribute("href");
    gsap.to( window, {
      duration: 1,
      ease: 'power4.out',
      scrollTo: {
        y: target,
        autoKill: false
      }
    });
  });
});

上記コードより前に、GSAPの本体とScrollToプラグインの2ファイルを読み込んでくださいね。

固定ヘッダーがある場合

offsetYを指定することで、固定ヘッダー分の高さを確保できます。レスポンシブなサイトだと画面幅によって固定ヘッダーの高さが変わる場合もあるので、要素クリック時に固定ヘッダーの高さを取得します。

/* --------------------
smooth scroll
固定ヘッダーのとき
-------------------- */

// ヘッダーの要素を取得（例えば.headerだった場合）
const h = document.getElementsByClassName('header')[0];

gsap.utils.toArray('a[href^="#"]').forEach(function(a) {
  a.addEventListener("click", function(e) {
    e.preventDefault();
    const target = a.getAttribute("href");
    gsap.to( window, {
      duration: 1,
      ease: 'power4.out',
      scrollTo: {
        y: target,
        autoKill: false,
        offsetY: h.offsetHeight, //ヘッダーの高さをセット
      }
    });
  });
});

以上です。

コードの解説

あっさり話が終わってしまいました。せっかくなのでコードを解説します。

アンカーリンクの取得

gsap.utils.toArray('a[href^="#"]').forEach(function(a) {
  ・・・
});

ハッシュタグのついたアンカーリンクを「gsap.utils.toArray」を使って取得。「forEach」でひとつずつ処理していきます。

クリックイベントの登録

a.addEventListener("click", function(e) {
   ・・・ 
});

「forEach」でひとつずつ取り出した要素に対してクリックイベントを登録していきます。

デフォルトの挙動をキャンセル

e.preventDefault();

a要素がクリックされたときのデフォルトの挙動をキャンセルします。キャンセルしないと、クリックした瞬間にアンカー要素にジャンプしちゃいます。

ページをスクロール

const target = a.getAttribute("href");
gsap.to( window, {
  duration: 1,
  ease: 'power4.out',
  scrollTo: {
    y: target,
    autoKill: false
  }
});

「gsap.to」と「scrollTo」を使ってwindowオブジェクトをアニメーション（画面をスクロール）させます。「y」に移動量を指定するのですが、GSAPでは「#top」のように移動先のIDを指定できます。とっても便利。

ちなみに、autoKillをtrueにすると一部環境で挙動がおかしくなるのでfalseが吉。GSAP v3ではautoKillのデフォルト値がfalseになったので記述しなくてもいいのですが、後で見たときに忘れそうなのであえて記述する殺法です。durationとeaseはお好みで変更してください。

やってみた感想

ページ内リンクのスクロールは、Vanilla JSでやろうとするとちょっと面倒で、私はjQueryを使うことが多かったのですが（WordPressサイトであれば常にjQueryも入ってますし）、GSAPでもかんたんに実装できます。今回はいちばんシンプルなカタチでの実装でしたが、要件に応じていろいろとアレンジできるのではないかと思います。