jQueryスクリプト異なるオフセットを持つ異なるセクションへスムーズにスクロール

Question

私は1ページのサイトに対して滑らかなスクロールスクリプトを使用しています。各アンカーにスクロールします。

デザイン上、アンカースナップをページの上部にまっすぐに置くことはできません。私はページの上にある隠れたアンカーを作成しなければならなかったので、上に正確にスナップしません。私は、このスクリプト内で発生するオフセットを作ることができることを知らされてい

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){ 
     event.preventDefault(); 
     $('html,body').animate({ 
      scrollTop: $('[name="' + this.hash.substring(1) + '"]').offset().top 
     }, 500); 
    }); 
}); 

：ここ

は、私が現在使用しているスクリプトです。これらのほとんど隠されたアンカーをどこにでも持つのではなく、単に頂点の最後に何かを加えて、それを特定のピクセル数だけオフセットすることができます。 250

$('html,body').animate({ 
    scrollTop:$('[name="' + this.hash.substring(1) + '"]').offset().top - 250 
}, 500); 

問題は、これは常に250ピクセルもオフセットになるだろうが、私は、例えば、ポートフォリオのdivは200pxのオフセットで固定することができるように、それは可変とする必要があるが、 - それはトップだろうdivに連絡するのは50ピクセルだけです。

誰かが、私がdivを固定していることに基づいてこのトップ - [変数]を調整できるスクリプトにセレクタを書き込むのを手伝ってもらえますか？

Answer 1

あなたは、指定されたアンカーのオフセットを決定するためのルールが何であるかについて実際には指摘していません。トップの値です。

おそらくもっとも簡単なのは、名前付きアンカーや、スクロールするために探している要素のオフセットを調整するために使用できる属性を導入することでしょう。

たとえば、data-section-offsetという新しい属性の名前付きアンカーがあり、のオフセットがで20pxになりたいとします。

<a id="myAnchor" data-section-offset="20">My Section</a> 

クリックハンドラでは、アニメーションの属性値を引き出すことができます。

jQuery(document).ready(function($) { 

    $(".scroll").click(function(event) { 
     event.preventDefault();   
     var $anchor = $('#' + this.hash.substring(1)); 
     $('html,body').animate({ 
      scrollTop: $anchor.offset().top - $anchor.attr('data-section-offset') 
     }, 500);   
    }); 
}); 

さらなる例を示すためにここにはfiddleがあります。

注@BenはHTML5 specification for custom data attributesは非常に有用で指摘したように、属性は、（上記のように）のいずれかのよう

$anchor.attr('data-section-offset') 

又はこの

$anchor.data('section-offset') 

等を引っ張ることができるようにjQueryのデータメソッドを有します>HTML 5 data- Attributes。

+0

@BenSwayneご意見ありがとうございます - 私はカスタムデータ属性のHTML5仕様について知らなかったことを認めなければなりません。 –