jQuery Web制作

【コピペOK!】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方

※ 当サイトではアフィリエイト広告を利用しています

スルスルっと移動するページ内リンクってどうやるんだろう?

ランディングページ(LP)ではほぼ必須かと思われるページ内リンクですが、今回はjQueryを使ってスルスルっとスムーススクロールで移動するタイプのページ内リンク(アンカーリンク)の作り方をご紹介します。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

ページ内リンク(アンカーリンク)とは?

作り方の前にページ内リンクについて軽く説明します。

通常リンク先のボタンなどをクリックすると別ページに移動しますが、ページ内リンクというのは読んだままですがクリックするとページ内の指定した場所に移動します。

主にLPのヘッダーメニューなどがそうですね。

そしてページ内への移動を瞬間的にパッと移動するのではなく、スルスルッと滑らかに移動するようにしてみたいと思います。

今回解説するコードではありませんが、この記事を目次をクリックした時のような動きになります。


jQueryを使ったスムーススクロールで移動するページ内リンク(アンカーリンク)の作り方

まずは今回の完成形を見てみます。

ヘッダーのメニューをクリックするとスクロールしながら移動します。

See the Pen
ページ内リンク
by junpei (@junpei-sugiyama)
on CodePen.

 

ページ内リンクを作成(jQuery未使用:瞬時に移動)

スムーススクロールでなければページ内リンクを作るにはHTML、CSSだけで出来ます。

まずはスムーススクロールを使わない状態を作ってみます。

<header class="header">
  <nav>
    <ul>
      <li><a href="#about">ABOUT</a></li>   
      <li><a href="#works">WORKS</a></li>   
      <li><a href="#gallery">GALLERY</a></li>   
      <li><a href="#service">SERVICE</a></li>  
    </ul>
  </nav>
</header>
<section id="about" class="section01">ABOUT</section>
<section id="works" class="section02">WORKS</section>
<section id="gallery" class="section03">GALLERY</section>
<section id="service" class="section04">SERVICE</section>

ここで注目したいは<a href="#〇〇"><section id="〇〇">になります。

この2か所に同じ名前を入れれば<a href="#〇〇">をクリックすると<section id="〇〇">に移動します。

それがこちらになります。

See the Pen
ページ内リンク(スムーズなし)
by junpei (@junpei-sugiyama)
on CodePen.

移動はしますがスムーススクロールではなくパッと瞬間移動します。

 

ページ内リンクを作成(jQuery使用:スムーススクロール

今度はページ内リンクにスムーススクロールをさせたいと思います。

jQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryの使い方はこちらの記事を参照下さい。

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

HTMLとCSSは先ほどと同じです。

異なる点はjQueryを使う、そしてスムーススクロールの為のjsファイルを作成するという点です。

それではそのjsファイルに書くコードを見てみます。

// ページ内スクロール
$('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;
});

これをコピペすればOKです。

ここでカスタマイズという程ではないですが、変更可能な箇所が2つあります。

  • スクロールの移動速度
  • スクロールの種類

 

スクロールの速度を変更

まずスクロールの速度ですが、以下の数値を変えればOKです。

const speed = 600;

単位はミリ秒なので、0.6秒ですね。

数値を小さくすれば早くなり、大きくすれば遅くなります。

これはクリックしてから移動先に行くまでの時間なので、遠くにあるほど早く感じます(今回はSERVICEが一番早く感じます)

 

スクロールの種類を変更

そしてスクロールの種類ですが、以下の行で『 linear(等速)』か『swing(変速)』のどちらかを選択できます。

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

今回はswingにしました。

恐らく、swingにする人がほとんどだと思います。

linearだとどんな動きになるかは、速度の変更と共にぜひご自身で確かめてみて下さい。

それでは冒頭と同じですが、完成形を確認してみましょう。

See the Pen
ページ内リンク
by junpei (@junpei-sugiyama)
on CodePen.

 

CSS一行でスムーススクロール(scroll-behavior)

実は、jQueryを使わずに、CSS一行書くだけでスムーススクロールは実装できます。

追加するコードはこちらです。

html {
  scroll-behavior: smooth;
}

See the Pen
ページ内リンク()
by junpei (@junpei-sugiyama)
on CodePen.

このscroll-behavior: smooth;は、safariなど未対応のブラウザがあったので気軽に使用できませんでしたが、現在はsafariも対応になったので気軽に使えるようになりました。

しかし注意点がいくつかあります。

注意ポイント

・swing(変速)のみ
・スピードの調整が出来ない
・すべてのページ内リンクがスムーススクロールになる

あとは他のjsに影響が出たりすることもあるので、

いつも正常に動いていた実装がなんか変な動作になる

と思ったらscroll-behavior: smooth;を削除してみましょう。

まとめ

今回は、jQueryを使ったスムーススクロールの書き方を解説してきました。

他のヘッダーに関する記事も参考になるかと思うので、ぜひ参考にしてみて下さい。

あわせて読みたい
【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法
【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法

続きを見る

あわせて読みたい
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

続きを見る

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作