jQuery Web制作 コーディング

【jQuery】コピペでOK!スムーズスクロールでスルスルッと移動するページ内リンク(アンカーリンク)の方法

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

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

ページ内リンクとは?

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

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

つまりページは変わりません。

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

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

 

今回の完成形

まずは今回の完成形を見てみます(スマホで見る場合はResultをタップして下さい)

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

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">
  <h2>ABOUT</h2>
  <p>ここにABOUTテキストが入ります。</p>
</section>
<section id="works">
  <h2>WORKS</h2>
  <p>ここにWORKSテキストが入ります。</p>
</section>
<section id="gallery">
  <h2>GALLERY</h2>
  <p>ここにGALLERYテキストが入ります。</p>
</section>
<section id="service">
  <h2>SERVICE</h2>
  <p>ここにSERVICEテキストが入ります。</p>
</section>

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

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

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

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

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

 

ページ内リンクを作成(jQuery使用)

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

今度はjQueryを使うので、使ったことがないという人は以下の記事を参考にして下さい。

【初めて使う人向け】jQuery本体を読み込む方法

 

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.

以上です。

-jQuery, Web制作, コーディング