スムーススクロールを簡単に実装する方法

スムーズな岩肌イメージ

ページ内リンクをクリックすると、画面がスーッと滑らかに移動するスムーススクロール

ただオシャレなだけじゃなくてサイト訪問者にもやさしいんですよね。通常のページ内リンクって一瞬で画面が切り替わってページ内で動いたのか別ページに飛んだのかイマイチわかりにくいんです。

けど、スムーススクロールはページ内を移動していることが視覚的にわかるので戸惑わずに済むメリットがあります。

オシャレでサイト訪問者にも優しい。そんなスムーススクロールを実装する方法を解説します。意外と簡単ですよ。

jQueryライブラリを読み込み

すでにjQueryライブラリを読み込み中の方はこの部分は読み飛ばしてください。

いままで使ったことがなく、サイト内にjQueryライブラリを読み込んでいない方はライブラリの読み込みからスタートです。

<head>~</head>の間に下記HTMLを読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

コピペするだけでスムーススクロールを実装!

スムーススクロールを実装するhtmlファイルをエディタで開き、<head>~</head>の間に下記HTMLを書き込んでください。

jQuery読み込みコード(前項)よりあとに書き込む必要がある点に注意。</head>の直前におけばOK。

<script>
$(function(){
   $('a[href^=#]').click(function() {
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      var speed = 500; // スクロールの速度(ミリ秒)
      $('body,html').animate({scrollTop:position}, speed, 'swing'); // スクロール方式
      return false;
   });
});
</script>

カスタマイズできる場所は500とswingの部分。コメントをつけた2行です。

500の数値を変えることでスクロールの速度を変えることができます。数値が小さいほどスクロールが早く、大きいほどにゆっくりになります。ミリ秒、つまり1000分の1秒単位なので、デフォルト500なら0.5秒で画面が遷移する計算です。

スクロール方式も変更可能。swingの部分をlinearに変更してみてください。スクロールの具合が変わります。スクロール方式はもっと増やすこともできますが、デフォルトではswingとlinearのみ。

jQueryを外部ファイルで読み込む場合

「 ごちゃごちゃするからjQueryのコードを直でHTMLに書き込むのはイヤ! 」って方は外部ファイルで読み込みましょう。

下記コードをエディタにコピペして任意のファイル名で保存して、FTPでサーバーにアップロードしてください。

$(function(){
   $('a[href^=#]').click(function() {
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      var speed = 500; // スクロールの速度(ミリ秒)
      $('body,html').animate({scrollTop:position}, speed, 'swing'); // スクロール方式
      return false;
   });
});

あとはHTMLファイル<head>~</head>の間に下記読み込みコードをコピペ。

src内の」URLはサンプル記述なので、ご自身でアップロードしたフォルダ構成&ファイル名に書き換えてください。

<script type="text/javascript" src="https://example.com/js/example.js"></script>

読み込みコードはjQueryライブラリよりあとに記述することをお忘れなく。よくわからない方は&lt;/head&gt;にでも。

<h3>サイトで読み込んでるjQueryバージョンが1.x.xの場合</h2>

読み込んでるjQueryバージョンが一般的に使われている3.x.xや2.x.xであれば上記のコードでオッケー。

冒頭、jQueryライブラリを読み込みの項で挙げたコードで読み込んでる場合も上記コードでオッケーです。

が、サイトで読み込んでいるjQueryバージョンが古く、1.x.xの場合は上記では動きません。コードが少し変わるので、下記をお使いください。


<script>
$(function(){
   $('a[href^="#"]').click(function() {
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      var speed = 500; // スクロールの速度(ミリ秒)
      $('body,html').animate({scrollTop:position}, speed, 'swing'); // スクロール方式
      return false;
   });
});
</script>

違いは最初の#をダブルクオーテーションで囲うか囲わないかだけ。カスタマイズ項目は同じです。

WordPressならプラグインでサクッと

WordPressの方はスムーススクロールはプラグインでサクッと実装しちゃいましょう。せっかくWordPressならプラグインを活用するのが楽々。

スムーススクロールの定番プラグインといえばEasy Smooth Scroll Links

プラグイン新規追加画面でEasy Smooth Scroll Linksを検索 → 追加 → 有効化するだけでオッケー。jQueryライブラリも不要です。

深く考えずデフォルトのままでも使えますし、細かく設定も可能です。せっかく簡単にプラグインが使えるWordPressですから、なにはともあれプラグインでちゃちゃっとやっちゃいましょう。

素のJavaScriptやCSSではなくjQueryで実装する理由

スムーススクロールはjQueryではなく素のJavaScriptでも実装できます。が、JavaScriptで実装しようとすると記述が多くてすごい行数になっちゃうんです。

その点、jQueryは上記の通り10行程度でスムーススクロールを実装できちゃうんですよね。素晴らしい。

行数が増えるとメンテナンス・カスタマイズも面倒になるし、せっかくjQueryで簡単にできるんだからjQueryを活用しましょう。ページ読み込み速度第一!なF1サイトを目指す方はライブラリなしで素のJavaScriptの方がいいかもですが。

あと、JavaScriptでもjQueryでもなくCSSでスムーススクロールを実現することはできます。しかも1行で。

しかし、CSSスムーススクロールの致命的な弱点が対応してないウェブブラウザがある点。safariが非対応なのはちょっとクリティカルすぎます。

CSSでのスムーススクロール対応がもっと進むまでは、まだまだjQueryスムーススクロールが現役です。

まとめ:スムーススクロールを簡単に実装する方法

  • jQueryライブラリの読み込みは必須。
  • <head>タグ内にコピペ or コピペで作ったJSファイルを読み込むだけでOK。
  • WordPressなら素直にプラグイン使った方が早いし楽。jQueryライブラリも不要。