2022/2/23 （更新日: 2022/2/24）

【完全解説】ページ内スムーススクロールをjQueryで実装する方法

Coding

ページ内スムーススクロールってどうやって実装するの？

そんな疑問にお答えします。

多くのWebサイトやランディングページではページ内スムーススクロールが実装されています。

ページ内スムーススクロールとはページ内リンクをクリックすると、スムーズに画面がスクロールしてジャンプする機能です。

実際の動きとしては下のようになります。

一度ソースコードの意味が理解できれば、あとはコードを使いまわせます。

しかし初心者にはそのソースコードを理解するのが一苦労です。

この記事ではjQueryがまだまだ苦手という方でも必ずわかるように、ていねいに解説します。

1 ページ内スムーススクロールを実装する

ページ内スムーススクロールを実装する

jQuery本体を読み込む

まず事前準備としてjQuery本体を読み込みます。

読み込み方がわからない方はコチラの記事を参照ください。

【初心者向け】jQuery本体を読み込む方法

jQueryがきちんと動作するかしっかり確認しておきましょう。

コード

まずは全コードを貼っておきます。

<!-- ヘッダー -->
<header id="js-header" class="header">
  <ul>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#works">WORKS</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</header>
<!-- ファーストビュー -->
<div class="fv"></div>
<!-- 各セクション -->
<section id="about" class="about">ABOUT</section>
<section id="works" class="works">WORKS</section>
<section id="contact" class="contact">CONTACT</section>

ul {
  list-style: none;
}

li {
  list-style-type: none;
}

a {
  cursor: pointer;
  text-decoration: none;
}
.header {
  position: fixed;
  width: 100%;
  background: #00CC99;
}

.header ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.header ul li a {
  display: block;
  height: 100px;
  line-height: 100px;
  color: #fff;
  font-size: 26px;
  transition: all .3s;
}

.header ul li a:hover {
  opacity: 0.7;
}

.fv {
  width: 100%;
  height: 100vh;
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  padding: 80px;
  font-size: 40px;
}

.about {
  background: gainsboro;
}

.works {
  background: lightblue;
}

.contact {
  background: pink;
}

$(function() {
  // #から始まるアンカータグをクリックしたら処理を実行
  $('a[href^="#"]').click(function() {
    // スクロールの速度（ミリ秒）
    const speed = 500;
    // アンカーの値取得（リンク先<href>を取得して、hrefという変数に代入）
    const href = $(this).attr("href");
    // 移動先を取得（リンク先<href>のidがある要素を探してtargetに代入）
    const target = $(href == "#" || href == "" ? "html" : href);
    // 移動先を調整(idの要素の位置をoffset()で取得しpositionに代入<ヘッダー分は差し引く>）
    const position = target.offset().top - $( '#js-header' ).outerHeight();
    // スムーススクロール
    $("html, body").animate({scrollTop: position}, speed, "swing");
    return false;
  });
});

コード解説

HTML

<header id="js-header" class="header">

ヘッダーにはid=”js-header”をつけておきます。

固定ヘッダーの場合、スムーススクロールで移動するときヘッダーの高さを引いてやる必要があります。

そうでないとヘッダーに重なる部分が出てしまいます。

スムーススクロールでのヘッダー

そうならないためにjQueryで記述するのですが、id付与はその前準備です。

<li><a href="#about">ABOUT</a></li>

aタグのリンク元には#aboutと指定します。

<section id="about" class="about">ABOUT</section>

ジャンプするリンク先にはid=”about”とつけます。

CSS

CSSは基本的な記述のみなので省略します。

jQuery

まずはjQueryのクリックアクションを記述します。

$(function(){ 
　// #から始まるアンカータグをクリックしたら処理を実行
  $('a[href^="#"]').click(function(){ 
    // スムーススクロールの実行処理をここに記述
  }); 
});

💡ポイント！　

a[href^=”#”]　は　「href が#から始まる要素を取得する」という記述

注意

#は必ずダブルクォーテーションで囲みましょう。

囲んでいない場合、jQueryのバージョンによっては正常に動きません。

上記のコードは「＃から始まるアンカータグをクリックしたら処理を実行する」という意味です。

ここから変数を4つ設定します。

変数その1

const speed = 500;

スムーススクロールの速度を設定します。

スクロール速度の時間を変数「speed」に代入しています。

これはのちほどanimate関数の時間指定で使用します。

速度はミリ秒で指定します。

1000秒＝1秒なので500ミリ秒は0.5秒かけて移動するということです。

この数字は大きいほどゆっくり移動することになります。

変数その2

const href = $(this).attr("href");

クリックしたアンカータグのリンク先（href）の中身を取得（attr）して、hrefという変数に代入しています。

ためしにconsole.logしてみましょう。

ちゃんと値が取れていることがわかります。

$('a[href^="#"]').click(function() {
//  省略
  const href = $(this).attr("href");
  console.log(href) //  確認用
  //  <a href="#contact">をクリックした場合
  //  結果→ #contact
});

スムーススクロールの実装

変数その3

const target = $(href == "#" || href == "" ? "html" : href);

href==“#”||href==“”　は　href == “#” or href == “”　と同じです。

つまり、hrefに入っているのが「#」または「空白」という意味。

? "html" : href

「?」は三項演算子といい、if文を簡潔にしたものです。

ここで三項演算子を簡単に説明します。

まずif文をおさらいします。

if　（条件式）{
     //  Trueの処理

}  else  {
    //  Falseの処理
}

上記のようにif文は条件式の結果に応じて「True」「False」の処理を振りわけます。

この条件式を三項演算子で記述すると以下になります。

条件式 ? Trueの処理 : Falseの処理

こちらのコードでも先ほどのif文と同じ内容です。

①条件式がまず最初にあって

②その結果が「True」か「False」なのかによって処理を分岐

させています。

これをふまえた上でもう一度コードを見てみます。

const target = $(href == "#" || href == "" ? "html" : href);

hrefに入っているのが「#」または「空白」ならば「”html”」を、そうでなければ「href（先ほど定義した）」の値を変数targetに代入する、となります。

変数4

const position = target.offset().top - $( '#js-header' ).outerHeight();

offset()によりドキュメントの左上を起点に指定位置までの距離を取得します。

offset().topとすることで上からの距離を取得します。

$( '#js-header' ).outerHeight()

でヘッダーの高さを取得します。

最初に

<header id="js-header" class="header">

としてヘッダーにidをつけましたがここで使っています。

ここで取得したヘッダーの高さをtarget.offset().topから引いてやります。

固定ヘッダーの場合はこうしておかないと、スクロールしたときヘッダーの高さ分かぶってしまいます。

この差し引いた上での上部からの距離を変数positionに代入しています。

💡ポイント！　4つの変数

speed : スクロールの速度
href : クリックしたアンカータグの値
target : 移動先
position : 移動先のドキュメント上部からの距離

4つの変数を設定すれば、あとは変数を元にanimateメソッドで動きを制御します。

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

animateメソッドは指定したプロパティを目的地まで動かすメソッドです。

まず、$(“html, body”)と指定することで、ページトップの位置を指定します。

{scrollTop: position}でpositionまでスクロールするという指定をしています。

speedはconst speed = 500;を定義したので500ミリ秒です。

“swing”はアニメーションの挙動です。

swingは始めがゆっくりで後半早くなります。

linearだと一定速度で動きます。

これでスムーススクロールの実装が完了しました。

以上です。

コメントを残すコメントをキャンセル

投稿者トシ