jQuery scrollToは2回目のクリック後にのみ正しく動作します

Question

ページに複数のscrollToがあります。問題は、最初のクリックでは少し外れていますが、その後のクリックでは正しいことです。これを訂正するために私は何ができるのですか？私のコードは次のようになります？：

var newHash; 

$(".nav-right li a").on('click', function(event) { 

    newHash = $(this).attr("id"); 

    if (this.hash !== "") { 


     // Store hash 
    hash = $("h2" + "#" + $(this).attr("id")); 
     $('html, body').stop().animate({ 
     scrollTop: $(hash).offset().top - $("#header.swag-style").height(), 
     }, 800, function(){ 
     return false; 

     window.location.hash = newHash; 

     }); 
    } // End if 

    }); 

あなたは以下のページで、トップナビゲーションバーをクリックしたときに問題を見ることができます：

>> scrollTo Error

私は解決策はありませんするには、以下の提案しようとしています利用可能。

>> stackoverflow

Answer 1

を使用してみてください私は、問題が何であったかを考え出しました。私は上記のコードは、最初のクリックは、上記の条件を満たしているスクロールをトリガした後.swag-styleクラスが追加されることを意味するclass.swag-style

if ($(this).scrollTop() > 50) { 

        $('#header').addClass('swag-style'); 

       } else { 
        $('#header').removeClass('swag-style'); 

       } 

を追加する下のコードのブロックを持っていました。これは高さを変える原因となります。その後のクリックで正しい高さが見つかる。

私はこの問題を解決するために、クリックの直後にクラス.swag-styleを追加することで、クリックトリガスクロールが発生する前に正しい高さになるようにしました。

$('#header, #search-box').addClass('swag-style'); 

Answer 2

問題は$("#header.swag-style").height()がnullであるので、あなたの#headerは最初のクラス盗品スタイルを持っていないということです。

は$("#header").height()代わりの$("#header.swag-style").height()

$('html, body').stop().animate({ 
    scrollTop: $(hash).offset().top - $("#header").height(), 
    }, 800, function(){ 
    return false; 

    window.location.hash = newHash; 

    });