ページ内アンカーでスムーズにスクロールする

jQueryを使って、ページ内アンカーをクリックしたときにスムーズに目標箇所までスクロールするためのスクリプト。

僕はよくやるのですが、コードを書く前に、どういうことをすればいいのかを具体的に言葉で表現してみると、

Documentのロードが終わったときに、href属性が”#”で始まるアンカーを探し、クリックイベントとしてそのhref属性(からハッシュを除いた値)をidとして持つ要素のオフセットを取得して、そこまで滑らかにスクロールする処理を設定する。

となります。

で、それをコードにしたのがこちら。

jQuery(function($){
	$('a[href^="#"]').click(function(){
		$('html, body').animate(
			{ scrollTop : $($(this).attr('href')).offset().top }
		);
		return false;
	});
});

蛇足ながら解説します。

jQuery( callback($) )
$(document).ready()の短縮形。コールバック関数の引数として$を与えるのが吉です。($がコンフリクトするのを防ぎます)
属性セレクタ [name ^= value]
name属性の値がvalueで始まる要素を選択します。
animate( properties, options )
propertiesに指定されたstyleを、現在値から設定値まで滑らかに変化させます。optionsには変化量関数、アニメーション時間の指定などが可能です。今回はoptionsを指定していません。

アニメーションさせる要素をhtmlとbodyにしているのは、クロスブラウザのためです。(ここが一番重要だったり・・・)

Javascriptで0パディング

Javascriptで0パディングしたいことがあって、つい「Javascript format」で調べたのですが全然出てきませんでした。

それも当然。formatなどという関数自体が存在しないんですね。

とはいえ手動でやるなんて、とてもイヤな感じです。

var param = "1";
while (param.length < 5) {
	param = "0" + param;
}
console.debug(param);

続きを読む Javascriptで0パディング