
ランディングページ(LP)ではほぼ必須かと思われるページ内リンクですが、今回はjQueryを使ってスルスルっとスムーススクロールで移動するタイプのページ内リンク(アンカーリンク)の作り方をご紹介します。
ページ内リンク(アンカーリンク)とは?
作り方の前にページ内リンクについて軽く説明します。
通常リンク先のボタンなどをクリックすると別ページに移動しますが、ページ内リンクというのは読んだままですがクリックするとページ内の指定した場所に移動します。
主に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を使った本体の読み込み方も分かりやすく解説
続きを見る
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も対応になったので気軽に使えるようになりました。
しかし注意点がいくつかあります。
注意ポイント
・スピードの調整が出来ない
・すべてのページ内リンクがスムーススクロールになる
あとは他のjsに影響が出たりすることもあるので、

と思ったらscroll-behavior: smooth;
を削除してみましょう。
まとめ
今回はjQueryを使ったスムーススクロールの書き方を解説してきました。
他のヘッダーに関する記事も参考になるかと思うので、ぜひ参考にしてみて下さい。
-
【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法
続きを見る
-
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法
続きを見る
以上になります。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
2023年12月31日まで!5大無料特典あり🎁