ページ内リンクをアニメーションでおこなう

ページ内リンクをアニメーション化する方法を解説します。

ページ内リンクは、目的の場所をすぐに表示できて便利ですが、そのまま使うとパッと画面が変わるため訪問者には別ページに移動したのかと思われてしまうことがあります。そこでアニメーション化させることによって同じベージの別の場所に移動したということをわかりやすくできます。

$("a").click(function(){
	var id = $(this).attr('href');
	if(id.match(/^#/)){
		var t = $(id).offset().top;
		$('html, body').animate({scrollTop:t}, 300);
		return false;
	}
});

処理の流れとしては、まずaタグのリンクがクリックされた場合のイベントを検知して、href属性でリンク先を取得します。リンク先の先頭に#があればそのIDの要素の位置を取得して、その位置までアニメーションで移動するという処理になります。

このJQueryをjsファイル化してheadタグで読み込めば、全てのページのページ内リンクを一括してアニメーション化することができます。

JQueryでおこなうことで応用もできます。例えば当サイトのようにスクロールしてもヘッダーが固定されているような場合には、ページ内リンクを使うとヘッダーの下に目的の要素がきてしまいます。こういった場合は上記スクリプトに少し手を加えることで対応することができます。

$("a").click(function(){
	var id = $(this).attr('href');
	if(id.match(/^#/)){
		var t = $(id).offset().top - 100; //上に間隔を空ける
		$('html, body').animate({scrollTop:t}, 300);
		return false;
	}
});

スクロールする位置を対象の要素の少し上に設定することによって、ヘッダーと被らないようにスクロールさせることができます。