このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSでページ内リンクをなめらかにスクロールする

記事Sep.28th, 2020
Dec. 28th,2021
スクリプトを使わずにCSSでページ内の他の箇所や他のページへ遷移後の特定の箇所への移動をスムーズなスクロールで行う方法について解説します。

スムーズスクロール

“スムーズスクロール”とは?

スムーズスクロール”とはアンカー・リンクのリンク先へ遷移する時に通常は瞬時に移動するところをなめらかにスクロールして移動する挙動のことです。

特にリンク元と同じウェブページ内にあるリンク先のアンカー・リンクでは、リンクをクリックした時に瞬時にリンク先へ移動してしまうとそのリンク先が同じウェブページにあるのかそうでないのかがわかりづらくなります。しかし、スムーズスクロールによってなめらかに移動すると同じウェブページ内で移動したことをユーザーが理解しやすくなります。

Javascriptでのスムーズスクロール

スムーズスクロールを実現させるためのJavascriptのコードは様々なものがありますが、以下のコードがよく使用されています。

$(function(){
$('a[href^=#]').click(function() {
var speed = 500; // スクロール速度(ミリ秒)
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
表示サンプルはリンク先を参照新しいウィンドウで表示します

このスクリプトを機能させるためにはjQueryを併せて読み込む必要があります。

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

ただし、このコードだけでは他のウェブページから遷移してきたときは瞬時にリンク先となる箇所に移動します。

また、同じウェブページ内でのリンクではURLにハッシュ(“#”)がつかないので移動後に元の場所へ戻ろうとブラウザの「戻る」ボタンをクリックすると元の場所ではなく前に見ていたウェブページまで戻ってしまいます。

CSSでスムーズスクロール

scroll-behavior”プロパティ

実はJavascript一切使用しなくても簡単にスムーズスクロールを実現する方法があります。それもスタイルシートでhtml”要素に以下のスタイルを適用するだけで実現することができます。

html { scroll-behavior: smooth;}
表示サンプルはリンク先を参照新しいウィンドウで表示します

scroll-behavior”プロパティはナビゲーション時のスクロールの挙動を指定するプロパティで、値に“smooth”と指定するとウェブページ内でのナビゲーション時にスムーズスクロールで移動するようになります。

このプロパティが定義されている仕様書の“CSS Overflow Module”はまだ作業草稿の段階ですが、主要なブラウザではすでにこのプロパティに対応しているので古いブラウザを使用しているユーザーを考慮する必要がなければ使用することができます。

scroll-behavior”プロパティによるスムーズスクロールは同じウェブページ内の他の場所からのリンクから移動してきた場合だけでなく、他のウェブページから遷移してきて特定の箇所へ移動する時にも機能します。また、URLにハッシュ(“#”)がつくので移動後にブラウザの「戻る」ボタンをクリックすると元の場所に戻ることができます。

Javascriptでの実装と違いスクロールするスピードを変更したり、到達位置をずらしたりするなどの細かな設定はできないという欠点もありますが、CSSにたった一行追加するだけなのでとても簡単にスムーズスクロールを実現することができます。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク