Cocoon|目次リンクを滑らかにスクロールさせる

WordPress 無料テーマ『Cocoon』の目次をクリックした際に、「スルスル~」っと滑らかにスクロールしながら見出しまで移動するカスタマイズ方法をご紹介します。

いわゆる『スムーススクロール』と言われています。

記事のポイント
  • 目次にスムーススクロールを実装する
  • ユーザビリティーアップ
  • コードをコピペするだけでカスタマイズ完了

Cocoon の『ページトップに戻るボタン』にはこのスムーススクロールが実装されていますが、目次はされていません。なので目次をクリックすると、ジャンプするかのように「パッ」と見出しが表示します。

これだと、どのくらい移動しているのか一見するとわからないですし、味気ない感じもします。個人的にはユーザビリティーアップになると思います。

なお、今回のカスタマイズは目次だけではなく、ページ内のリンクすべてにスクロールアニメーションが適用されます。

お気に入りのカスタマイズなので当サイトでも適用中です!

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

Cocoon の目次にスムーススクロールを実装するカスタマイズ後のイメージ

実際の画面で動作を確認したい方は、下のリンクよりデモページへアクセスしてみてください。

デモページ
GIF動画

Cocoon の目次にスムーススクロールを実装するカスタマイズの流れ

ざっくり手順
  1. WordPress 管理画面にアクセスする
  2. 外観】⇒【テーマエディター】をクリックする
  3. javascript.js】をクリックする
  4. カスタマイズ用コードをコピーする
  5. コードを javascript.js に貼り付ける
  6. ファイルを更新】をクリックする

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る(図解)】をクリックしてください。それぞれの手順を画像付きで解説しています。

詳しい手順
  • STEP 1
    WordPress 管理画面にアクセスする

    『https://ドメイン名/admin』にアクセスすると、すでにログイン済みの方は【ダッシュボード】が表示されます。

    ログインしていない場合は、ログインページが表示されるので、ユーザー情報を入力後、ログインしてください。

  • STEP 2
    【外観】⇒【テーマエディター】をクリックする

    外観】メニューの上にマウスポインターを合わせ、展開したサブメニューの【テーマエディター】をクリックしてください。

  • STEP 3
    【javascript.js】をクリックする

    右側の【javascript.js】をクリックしましょう。javascript.js は、独自の JavaScript コードを記述する際に利用するファイルになります。

  • STEP 4
    カスタマイズ用コードをコピーする

    javascript.js ファイルの編集画面が表示されたら、まずはカスタマイズ用コードをコピーしましょう。コードの右上に表示されている【コピーする】をクリックすればコピー可能です。

  • STEP 5
    コードを javascript.js に貼り付ける

    カスタマイズ用コードを「//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。」と書かれている行の、すぐ下辺りに貼り付けてください。

    すでに何かしらのコードが記述してある方は、そのコードの下に貼り付けましょう。

  • ラベル
    【ファイルを更新】をクリックする

    コードを貼り付けたら、左下の【ファイルを更新】をクリックして保存します。

    以上で、カスタマイズは完了です。

    ご自身のサイトを確認してみてください。

Cocoon の目次にスムーススクロールを実装するカスタマイズ用コード

javascript.js にコピペする
/************************************
** スムーススクロールを実装する
************************************/
$(function() {
	$('a[href^=#]').click(function() {
		var speed    = 400;
		var offsetY  = 30;
		var target   = $(this).attr('href');
		var position = $(target).offset().top - offsetY;
		$('html, body').animate({
			scrollTop: position
		}, speed);
		return false;
	});
});

下記の部分でスクロール時間を調整しています。400 = 400ミリ秒のことで、0.4秒かけてスクロールする意味です。例えばここを『1000』に編集すれば、1秒かけてスクロールします。

var speed    = 400;

あと、下記の部分ではスクロールの終了地点を決めています。『30』の意味は、見出しの30px上でスクロールが終わるということです。

var offsetY  = 30;

細かいことですが、見出しピッタリにスクロールすると余白がない状態なので、見出しのスタイルによっては文字が見えにくくなってしまいます。これを避けるために見出しの手前でスクロールが終わるようにしています。

またこれは、ヘッダーを固定表示されている場合にも有効です。30 の数値を大きくすればそれだけ余白も広くなるので、ヘッダー分の高さを考慮してスクロールさせられます。

今回は固定ヘッダーについては詳しく触れませんが、またおいおい追記したいと思います。

補足|CSS だけでもスムーススクロールはできるけど……

実は下記のコードをスタイルシートに追加するだけでも、スムーススクロールになるにはなります!

html {
	scroll-behavior: smooth;
}

ただ、scroll-behavior プロパティの痛い点は、IE や Safari ブラウザに対応していていないことです。IE に関してはサポートが2022年6月15日に終了するのでまあ良しとしても、iPhone ユーザーに対してスムーススクロールできないのはちょっと厳しいです。

ということで、本記事では jQuery を使ったスムーススクロールを紹介しました。逆に言えば、ブラウザーの互換性を気にしなければ、CSS を編集するのでOKです。


コメント

タイトルとURLをコピーしました