スムーススクロールを簡単に実装する方法【コピペするだけ！】

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

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

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

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

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に変更してみてください。スクロールの具合が変わります。

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

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

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

形式はJavaScriptファイル、拡張子は.jsです。

$(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;
   });
});

続いて、下記読み込みコードを</head>内にコピペ。

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

一番最初にご紹介したjQueryコードの次行にでも入れれば大丈夫。もしくは</head>の直前でも可。jQueryライブラリの読み込みよりあとに記述する必要があるためです。

サイトで読み込んでるjQueryバージョンが1.ｘ.ｘの場合

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

が、サイトで読み込んでいるjQueryバージョンが古く、1.ｘ.ｘの場合は上記コードでは動作しません。

新しいバージョンをjQueryを読み込ませるのもありですが、その場合はすでに実装済みの機能が動かなくなる可能性があり、あまりオススメしません。

jQuery バージョン1.ｘ.ｘの場合は、下記コードをお使いください。

<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ライブラリも不要。

JavaScript,WEB制作JavaScript,jQuery,スムーススクロール,ページ内リンク