メニュー
  1. ホーム
  2. ワードプレス
  3. IDを使って特定の要素へスクロールさせる方法とスムーススクロールを実装するJavaScriptコードの紹介

IDを使って特定の要素へスクロールさせる方法とスムーススクロールを実装するJavaScriptコードの紹介

ワードプレス

本記事では、IDを使って特定の要素へスクロールさせる簡単な方法と、スムーススクロールを実装するためのJavaScriptコード【jQuery】を紹介していきます。

目次

IDを使って特定の要素へスクロールさせる方法

以下がIDを使ってスクロールさせるコードになります。
『こちらをクリック』をクリックすると『遷移先』のセクションへ移動します。

<a href="#scroll"><p>こちらをクリック</p></a>
<h2 id="scroll">遷移先</h2>

まず、id名は何でもいいですが仮に『id=”scroll”』というスクロール後に遷移させたい箇所にidを設定します。

次にリンク元のaタグに『href=”#scroll”』と先ほど設定したidをhrefに設定していきます。

この時にid名の前に『#』を忘れないように気を付けてください。

スムーススクロールを実装するJavaScriptコードの紹介

以下がスムーススクロールを実装するJavaScriptのコードになります。

jQuery(document).ready(function() {
  $('a[href^="#"]').click(function () {
    const speed = 600;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);

    let position = target.offset().top;

    $("body,html").animate({ scrollTop: position }, speed, "swing");
    return false;
  });
});

簡単に解説すると、aタグのリンクで#で始まるリンクの場合、600のスピードで対象のコンテンツへスムーススクロールする内容になっています。

詳しい解説については以下をご参照ください。

コードの解説

  • $('a[href^="#"]').click(function () { ... });
    • href属性が#で始まるリンクをクリックしたときのイベントを設定します。
  • const speed = 600;
    • スクロール速度を600ミリ秒に設定します。
  • let href = $(this).attr("href");
    • クリックされたリンクのhref属性の値を取得します。
  • let target = $(href == "#" || href == "" ? "html" : href);
    • hrefが#または空文字の場合は<html>要素をターゲットにし、それ以外の場合はhrefに対応する要素をターゲットにします。
  • let position = target.offset().top;
    • ターゲット要素の上端からの距離を取得します。
  • $("body,html").animate({ scrollTop: position }, speed, "swing");
    • scrollTopプロパティをpositionに設定し、アニメーションでスムーズにスクロールします。
  • return false;
    • デフォルトのリンクの動作（ページのジャンプ）を無効にします。

まとめ

今回はIDを使って特定の要素へスクロールさせる簡単な方法と、スムーススクロールを実装するためのJavaScriptコードを紹介していきました。

紹介した方法は数ある方法の中の一つに過ぎない為、もし不具合など発生する場合は別の方法を探ってみてはいかがでしょうか？

ワードプレス
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次