【jQuery】ページ内リンクでスクロールをスムーズに簡単に実装する方法

  jQuery プログラミング

この記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。

web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。

こういった僕が、分かりやすく解説していきます。

読者の悩み

  • コピペで簡単にできる実装方法を知りたい
  • ページ内リンクをスムーズに目的の箇所までスクロールさせたい
  • JavaScript、jQueryの知識はあまりないけど大丈夫かな

こういった疑問に答えます。

本記事の内容

  • jQueryでの実装方法をデモページとソースコードで確認できます
  • ハンバーガーメニューでスムーズに目的の箇所までスクロールする機能をわかりやすく解説します
  • コピペで使えるコードをストックしておけば使いまわしできます

デモページを用意

デモページを用意してますので実際に動きが確認できます。

DEMO

サンプルコードを用意

コード［HTML / SCSS / CSS / jQuery］をGitHubの方でも確認できます。

実際のソースコードをアップしているのでクローンしてもOKです。

phpファイル
scssファイル（ハンバーガーメニュー用）
scssファイル
jsファイル（ハンバーガーメニュー用）
jsファイル
cssファイル

デモページとソースコードを確認しながらご覧ください。

骨組みは以下の3つです。

  • スムーズスクロールの下準備
  • ハンバーガーメニュー
  • スクロール処理

ではコードを見ていきます。

目次

スムーズスクロールの下準備

準備はシンプルでリンクを以下のように設定するだけです。

ハンバーガーメニュー

<div id="hamburger">
    ︙
  <!-- メニューリスト -->
  <nav id="gNav">
    <ul class="gNav-menu">
      <li><a href="#menu01">Web制作</a></li>
      <li><a href="#menu02">ライティング</a></li>
      <li><a href="#menu03">デジタルマーケティング</a></li>
      <li><a href="#menu04">セールス</a></li>
      <li><a href="#menu05">マネジメント</a></li>
    </ul>
  </nav>
</div>

ハンバーガーメニューのaタグにidを設定します。

コンテンツ

<div class="c-smooth-scroll">
    ︙
  <ul class="c-smooth-scroll__list">
    <li id="menu01"></li>
    <li id="menu02"></li>
    <li id="menu03"></li>
    <li id="menu04"></li>
    <li id="menu05"></li>
  </ul>
    ︙
</div>

各コンテンツにidを振りページ内リンクを設定します。
準備は以上です。

ハンバーガーメニュー

今回使用しているハンバーガーメニューの仕組みについて解説します。

ハンバーガーボタン

<div id="hamburger">
  <!-- ハンバーガーボタン -->
  <p class="btn-gNav">
    <span></span>
    <span></span>
    <span></span>
  </p>
    ︙
</div>

ハンバーガーメニューのボタンになります。spanタグでハンバーガーメニューの3本線を表現します。

$('.btn-gNav').on("click", function(){
  $(this).toggleClass('open');
    ︙
});

クリックするとtoggleClassで.btn-gNav要素に.openクラスが追加されて、3本線が×に切り替わります。

メニューリスト

<div id="hamburger">
    ︙
  <!-- メニューリスト -->
  <nav id="gNav">
    <ul class="gNav-menu">
      <li><a href="#menu01">Web制作</a></li>
      <li><a href="#menu02">ライティング</a></li>
      <li><a href="#menu03">デジタルマーケティング</a></li>
      <li><a href="#menu04">セールス</a></li>
      <li><a href="#menu05">マネジメント</a></li>
    </ul>
  </nav>
</div>

ハンバーガーメニューのメニューリストになります。最初は右に閉まっておきます。

$('.btn-gNav').on("click", function(){
    ︙
  $('#gNav').toggleClass('open');
});

ハンバーガーメニューをクリックするとtoggleClassで#gNavの要素に.openクラスが追加されて、スライドしてメニューが出てきます。

$('.gNav-menu li a').on("click", function(){
  //情報を取得
  var naviChecker = $('#gNav').hasClass('open');
  //切替
  if (naviChecker) {
    $('.btn-gNav').removeClass('open');
    $('#gNav').removeClass('open');
  }
});

最後はメニューリストに処理を加えます。

変数naviCheckerに.openクラスが存在するかの情報を取得し代入します。

条件分岐でチェックした結果.openクラスがある場合は削除して、ボタンの×を3本線に切り替えてメニューリストを元の位置にスライドして引き戻します。

ハンバーガーメニューは常に右上に配置させています。TOPへ戻るボタンを配置する必要が無くいつでも好きな位置へ移動できます。

スクロール処理

最後に、aタグを押した時にスムーズにスクロールするようにアニメーションを設定します。

$('a[href^="#"]').click(function () {
  var speed = 400; // ミリ秒
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? "html" : href);
  var position = target.offset().top;
  $("body,html").animate({ scrollTop: position }, speed, "swing");
  return false;
});

対象要素.animate( CSSプロパティ, duration, easing, 関数 )

animate()は、特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれます。

CSSプロパティ

オブジェクト形式で記述する必要があります。

変数positionを設定してリンクの距離をスクロールするアニメーションを調整します。

duration

ミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。

変数speedを設定してアニメーション時間を調整します。

easing

アニメーションの挙動を指定可能で、「linear」と「swing」の2種類を文字列で設定します。

「swing」はeasingで、エフェクトの動きを加速/減速させるための関数です。

関数

引数にはコールバック関数を設定することができるのですが、今回は設定していないので割愛させていただきます。

上記のように、各変数を設定して値を代入し、animate()イベントで引数で指定します。

今回は以上になります。

作成方法が不安な方は是非参考にしていただけると嬉しいです。

一覧へ

Recommended