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

2019年6月26日

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

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

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

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

1. jQueryライブラリを読み込み
2. 続いてスムーススクロールコードをコピペ
3. jQueryを外部ファイルで読み込む場合
4. サイトで読み込んでるjQueryバージョンが1.ｘ.ｘの場合
5. WordPressならプラグインでサクッと
6. 素のJavaScriptやCSSではなくjQueryで実装する理由
7. まとめ：スムーススクロールを簡単に実装する方法

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>

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