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

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

記事Sep.28th, 2020
スクリプトを使わずに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;
$('body,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”と指定するとウェブページ内でのナビゲーション時にスムーズスクロールで移動するようになります。

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

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

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

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