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; 

    });