jQueryを使って、ページ内アンカーをクリックしたときにスムーズに目標箇所までスクロールするためのスクリプト。
僕はよくやるのですが、コードを書く前に、どういうことをすればいいのかを具体的に言葉で表現してみると、
Documentのロードが終わったときに、href属性が”#”で始まるアンカーを探し、クリックイベントとしてそのhref属性(からハッシュを除いた値)をidとして持つ要素のオフセットを取得して、そこまで滑らかにスクロールする処理を設定する。
となります。
で、それをコードにしたのがこちら。
jQuery(function($){ $('a[href^="#"]').click(function(){ $('html, body').animate( { scrollTop : $($(this).attr('href')).offset().top } ); return false; }); });
蛇足ながら解説します。
アニメーションさせる要素をhtmlとbodyにしているのは、クロスブラウザのためです。(ここが一番重要だったり・・・)