GHWEB06.GRASSHOPPER

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

サンプル

// a要素が#で始まるリンクがクリックされると{}内の処理を実行
$('a[href^=#]').click(function(){

// $(this.hash)でクリックしたa要素の「#」を取得。
// offset().top でY座標を調べて変数offset に代入
var offset = $(this.hash).offset().top;

//animate（）で600ミリ秒後にscrollTopをoffset の値に
$('html,body').animate({ scrollTop: offset }, 600);

//a要素を無効化
return false;

上までスクロールしない時

上までスクロールしない時は、id=”top” の位置が「0」ではありません。
下記の記述の下に

var offset = $(this.hash).offset().top;

alert(offset);を追加して、トップへのリンク確認をします。

var offset = $(this.hash).offset().top;
alert(offset);

すると下記画像のようなアラートが表示されます。0じゃないですよね？

これは、cssのmargin指定等が原因ですので指定を変更するか、if(offset < 50){ offset = 0 } を追加して取得したoffsetの数値が50より小さい場合、offset に 0を代入します。 ※とりあえず50にしました。 ※CSSの変更だけで直る場合、この記述は不要です。 [js] var offset = $(this.hash).offset().top; alert(offset); if(offset < 50){ offset = 0 } [/js] 最上部まで行く事が確認できたら「alert(offset);」を削除します

area属性のリンクでもスクロールさせる場合

下記の記述箇所に

$('a[href^=#]').click(function() {

area[href^=#] の記述を追加して

$('a[href^=#], area[href^=#]').click(function() {

とするとarea属性のリンクもスクロールします。