[jQuery] ページ内をスムースにスクロールする

ティコ    WordPress備忘録     jquery, wordpress, スクロール, スムース, ページ内

WordPressについて、というよりはホームページ作成での便利な事ですが…。

ここの記事を参考にしてページ内をスムースにスクロールする関数を作成しました（ほぼ丸写しですけど）。

使用条件としては必ずjQueryが読み込まれている事です。

// Easingの追加
jQuery.easing.quart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

/*-------------------------------------
 ページ読み込み中
-------------------------------------*/
jQuery(document).ready(function(){

	//
	// <a href="#***">の場合、スクロール処理を追加
	//
	jQuery('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var $target = jQuery(this.hash);
			$target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
				return false;
			}
		}
	});

});

これで後は、

<a href="#header">TOPに戻る</a>

のようにhref属性にページ内リンクを貼るとスムースにスクロールするようになります。
結構面白いです。