jQuery scrollTo работает корректно только после второго щелчка

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

я понял, что проблема была. У меня был блок кода, ниже которого добавляет class.swag-style

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

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

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

       } 

Приведенный выше код означает .swag-style класс будет добавлен после того, как первый щелчок запускает свиток, который удовлетворяет этому условию. Это, в свою очередь, приводит к изменению высоты. Последующие клики найдут правильную высоту на месте.

Я решил проблему, добавив строку, ниже которой добавляется класс .swag-style сразу после щелчка. Таким образом, правильная высота будет на месте до того, как произойдет прокрутка с нажатием кнопки.

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

Answer 2

Проблема заключается в том, что ваш #header не имеет хабар стиль класса в начале так $("#header.swag-style").height() равна нулю.

Попробуйте использовать $("#header").height() вместо $("#header.swag-style").height()

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

    window.location.hash = newHash; 

    });