2011-08-12 20 views
1

名前付きアンカーをスムーズにスクロールするために、次のスクリプトを使用していますが、リンク先がページ内のアンカーよりも上(スクロールしない)の場合は機能しません。Jquery scroll anchor up

$(document).ready(function(){ 
     $('a[href^="#"]:not(.top)').click(function(event){ 
     event.preventDefault(); 
    var full_url = this.href; 
     var parts = full_url.split("#"); 
     var trgt = parts[1]; 
     var target_offset = $("#"+trgt).offset(); 
     var target_top = target_offset.top; 
     $('html, body').animate({scrollTop:target_top}, 500); 
    }); 
}); 

どのように友好的にする方法を知っていますか?

編集:

私は現在、今上向きにスクロールするためにこれを使用していますが、あなたは1つの関数にそれを行うためのクリーンな方法を知っていれば離れて投稿してください。

$('.top').click(function(event){ 
    event.preventDefault(); 
    $('html, body').animate({scrollTop:0}, 500); 
}); 

答えて

3

をそれは私の作品、名前付きアンカーの代わりに要素IDを使用します。

名前付きアンカーの代わりにIDを使用する必要があります。名前付きアンカーはHTML5では非推奨です。

<a name="section1"><h1>Section One</h1></a> 

should be: 

<h1 id="section1">Section One</h1> 

そして、あなたは1つの関数にスクロールを組み合わせることができます:それはある

$('a[href^="#"]').live('click',function(event){ 
    event.preventDefault(); 
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0; 
    $('html, body').animate({scrollTop:target_offset}, 500); 
}); 
+1

おかげで、彼らが廃止され実現didntのか、そのハッシュアンカーは、IDのエーテルに行くことができます。 –

+1

スクリプトを更新しました。今すぐ.topクラスを削除できます。 –

+0

ありがとうございました –