jQueryを使わずにJavaScriptでスムーススクロールの実装方法!

jQueryを使わずにJavaScriptだけでスムーススクロールを実装する方法をご紹介します!数行のJavaScriptで簡単にでき、サンプルコードもありますので、これまでjQueryで実装していた人もこの機会にぜひ脱jQueryをしてみましょう!

コンテンツ [表示]

  1. 1jQueryを使わずにJavaScriptでスムーススクロールを実装したい
  2. 2jQueryを使わずにJavaScriptでスムーススクロールを実装する方法
  3. 2.1コピペで使える簡単なスムーススクロール
  4. 2.2「smooth-scroll.js」プラグインを利用するスムーススクロール
  5. 3まとめ

jQueryを使わずにJavaScriptでスムーススクロールを実装したい

 昨今では、jQueryを使わなくてもよくなる場面が多くなってきました。

そうなると、それなりに読込みリソースが必要なjQueryをプロジェクトから排除したいという気持ちが湧くのは当然でしょう。

jQueryもバージョン3以降は、あえてjQueryが用意する必要のないメソッドを廃止するなどスリム化が進んでいます。

そこで、今回は、jQueryを使わずにJavaScriptだけでスムーススクロールを実装する方法をご紹介します!

サンプルコードもありますので、みなさんもぜひ脱jQueryに挑戦してみてください。

Photo byroketpik

jQueryを使わずにJavaScriptでスムーススクロールを実装する方法

 スムーススクロールといえば、

グローバルナビやトップへ戻るなどのページ内リンクのときにページ移動がスクロールアニメーションにするアレですね!

今回は下の画像のようなものを作りたいと思います。

スムーススクロール例

今回は、プラグインを使った場合と使わない場合の2パターンを紹介します。

プレビュー付きのサンプルコードもありますので、ぜひみなさんも使ってみてくださいね!

コピペで使える簡単なスムーススクロール

まずは、コピペするだけで使えるjQueryを使わないスムーススクロールを解説します。

下が処理のながれとなります。

処理のながれ

  • 1. すべてのhref="#"のaタグを取得
  • 2. 1のaタグにそれぞれクリックイベントを設定
  • 3. ターゲットの位置を取得
  • 4. スムースにスクロール

それでは、1から順番に処理のながれを説明します。

1. すべてのhref="#"のaタグを取得

【JavaScript】1. すべてのhref="#"のaタグを取得

// 1. すべてのhref="#"のaタグを取得
const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');

ページ内のa要素でhref属性値が#{id名}で始まる要素を取得しています。

2. 1のaタグにそれぞれクリックイベントを設定

【JavaScript】2. 1のaタグにそれぞれクリックイベントを設定

// 2. 1のaタグにそれぞれクリックイベントを設定
for (let i = 0; i < smoothScrollTrigger.length; i++) {
    smoothScrollTrigger[i].addEventListener('click', (e) => {
        
       // 3と4の処理はこの中に入ります。

    });

}

for文を使ってで1で取得したa要素すべてにそれぞれクリックイベントを設定していきます。
3、4の処理はこの中に入ってきます。

3. ターゲットの位置を取得

【Javascript】3. ターゲットの位置を取得

// 3. ターゲットの位置を取得
e.preventDefault();
let href = smoothScrollTrigger[i].getAttribute('href'); // 各a要素のリンク先を取得
let targetElement = document.getElementById(href.replace('#', '')); // リンク先の要素(コンテンツ)を取得

const rect = targetElement.getBoundingClientRect().top; // ブラウザからの高さを取得
const offset = window.pageYOffset; // 現在のスクロール量を取得
const gap = 60; // 固定ヘッダー分の高さ
const target = rect + offset - gap; //最終的な位置を割り出す

ひとまず、e.preventDefault()でデフォルトの動作をキャンセルします。
これがないと、デフォルトのイベントでa要素のリンク先にスムーススクロールなしで移動してしまいます。
 

1で取得したid名を、targetElementの変数に代入し、
これを元に移動する先のコンテンツ(targetElement)の位置を求めてます。

jQueryだと、offsetTop()というメソッドで簡単にウィンドウからターゲットまでの位置を取得できるのですが、JavaScriptにはありませんのでここでは順番に計算で求めていきます。

気を付けて欲しい点は、
ヘッダーをcssでfixedにしているので、ヘッダーとコンテンツが被らないように下記の1行で調整しています。

const gap = 60;

ヘッダーの高さが60pxになるので、数値を60としていますが必要なければ0としてください。

4. スムースにスクロール

【JavaScript】4. スムースにスクロール

// 4. スムースにスクロール
window.scrollTo({
    top: target,
    behavior: 'smooth',
});

最後に、scrollTo()というメソッドを使って、スムーススクロールをするように命令しています。

behaviorの値をsmoothにすることが重要です。

下が、全体的なソースコードになります。

【JavaScript】コピペで使える簡単なスムーススクロール


// 1. すべてのhref="#"のaタグを取得
const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');

// 2. 1のaタグにそれぞれクリックイベントを設定
for (let i = 0; i < smoothScrollTrigger.length; i++) {
    smoothScrollTrigger[i].addEventListener('click', (e) => {
        
        // 3. ターゲットの位置を取得
        e.preventDefault();
        let href = smoothScrollTrigger[i].getAttribute('href'); // 各a要素のリンク先を取得
        let targetElement = document.getElementById(href.replace('#', '')); // リンク先の要素(コンテンツ)を取得
        
        const rect = targetElement.getBoundingClientRect().top; // ブラウザからの高さを取得
        const offset = window.pageYOffset; // 現在のスクロール量を取得
        const gap = 60; // 固定ヘッダー分の高さ
        const target = rect + offset - gap; //最終的な位置を割り出す

        // 4. スムースにスクロール
        window.scrollTo({
            top: target,
            behavior: 'smooth',
        });

    });

}

プレビュー付きのサンプルコードから実際の挙動についても確認してみましょう!

「smooth-scroll.js」プラグインを利用するスムーススクロール

jQuery非依存でスムーススクロールを実装できる「smooth-scroll.js」をご紹介します。
軽量で、アニメーションに関するeasingも複数用意されています。

今回は、簡単な説明になりますので、
ダウンロードやその他のオプションについては公式のGithubからご確認ください。

GitHub - cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.
A lightweight script to animate scrolling to anchor links. - cferdinandi/smooth-scroll

それでは、使い方を見てみましょう!

【HTML】「smooth-scroll.js」プラグインを利用するスムーススクロール

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>

まず、必要になるのはプラグインのJSファイルの読込みです。

さて、次はJavaScriptのコードを見てみましょう!

【JavaScript】「smooth-scroll.js」プラグインを利用するスムーススクロール

var scroll = new SmoothScroll('a[href^="#"]');

たったこれだけでいいんです。

さすが、プラグインです。簡単ですね!

こちらも、プラグインを使っていないときと同様に、
ページ内のa要素でhref属性値が#{id名}で始まる要素に対して動作します。

プレビュー付きのサンプルコードから実際の挙動についても確認してみましょう!

まとめ

いかがでしたでしょうか?
今回は、jQueryを使わずにJavaScriptだけでスムーススクロールを実装する方法をご紹介しました。

これから脱jQueryが進んでいくと思われますが、まだまだjQueryをつかったWEBサイトやプロジェクトはあります。
実際、これから制作するWEBサイトでもjQueryを使っているものは結構あります。

大事なのはどちらの方法でも対処できるようになっておくことですね!

GeekHive採用サイト

関連記事