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を併せて読み込む必要があります。

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

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

“scroll-behavior”プロパティ

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

html { scroll-behavior: smooth;}


表示サンプルはリンク先を参照

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

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

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

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