ページ内のアンカーリンクにスムーススクロールを実装するJavaScriptのソースコードを紹介！ヘッダーと見出しが被ってしまう原因についても解説！

2023年12月1日
コラム
JavaScript

コラム

1 はじめに
2 スムーススクロールの動作確認
3 スムーススクロールのJavaScriptのソースコード
4 スムーススクロールをした後に、ヘッダーと見出しが被ってしまう原因
5 まとめ

はじめに

今回はページ内のアンカーリンクにスムーススクロールを実装するJavaScriptのソースコードをご紹介します。純粋なJavaScriptのソースコードとjQueryのソースコード両方を紹介します。

この記事でわかること
スムーススクロールを実装するJavaScriptとjQueryのソースコード
スムーススクロールをした後に、ヘッダーと見出しが被ってしまう原因

スムーススクロールの動作確認

まずは下記でスムーススクロールの動作を確認してみてください。

赤へリンク

青へリンク

緑へリンク

黄色へリンク

スムーススクロールのJavaScriptのソースコード

純粋なJavaScriptのスムーススクロールのソースコード

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = this.getAttribute('href');
        const targetElement = document.querySelector(target);
        if (targetElement) {
            const headerHeight = document.querySelector('.l-header').offsetHeight;
            const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY - headerHeight;
            window.scrollTo({
                top: offsetTop,
                behavior: 'smooth'
            });
        }
    });
});

jQueryのスムーススクロースのソースコード

jQuery('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    const target = jQuery(this).attr('href');
    const targetElement = jQuery(target);
    if (targetElement.length) {
        const headerHeight = jQuery('.l-header').outerHeight();
        const offsetTop = targetElement.offset().top - headerHeight;
        
        jQuery('html, body').animate({
            scrollTop: offsetTop
        }, 800);
    }
});

ソースコード解説

jQueryの「$」は「jQuery」に変換

jQueryの「$」は要素を取得する時などに通常使用するものですが、WordPressでそのまま「$」を使用するとエラーが発生します。そのため自分は「$」を「jQuery」と書くようにしています。

const headerHeight

ヘッダーの高さを取得しています。「.l-header」はクラス名なので適宜ご自身のヘッダーのクラス名に置き換えてください。

const offsetTop

アンカーリンクの遷移先の対象要素の上端までの位置を取得しています。

今回のソースコードはヘッダーが「position: fixed;」で固定ヘッダーになっている想定になっています。

固定ヘッダーなので「ヘッダーの高さ（headerHeight）」を引いています。

スムーススクロールをした後に、ヘッダーと見出しが被ってしまう原因

よくあるスムーススクロールのエラーで「ヘッダーが見出しと被ってしまう」というのを見かけます。

その場合、「スクロール量」から「ヘッダーの高さ」を引けば、エラーが解消されます。

ヘッダーは固定ヘッダーなのか、固定ヘッダーではないか。
固定ヘッダーの場合はスクロール量からヘッダーの高さを引かないと、スクロールした後にヘッダーと見出しが被ってしまう。

まとめ

今回はページ内のアンカーリンクにスムーススクロールを実装するJavaScriptのソースコードをご紹介しました。今回紹介したソースコードをコピペしてもらえれば、スムーススクロールは実装できますが、ヘッダーが固定ヘッダーか固定ヘッダーではないかで、ソースコードが変わる部分があるため注意してください。

offsetTopの値
固定ヘッダーの場合
const headerHeight = document.querySelector('.l-header').offsetHeight;
const offsetTop = targetElement.offset().top – headerHeight;

固定ヘッダーでない場合
const offsetTop = targetElement.offset().top;