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

  });

点击下面页面的top-nav可以看到问题：

>> scrollTo Error

我已经尝试了下面建议的解决方案，但没有用。

>> Whosebug

Answer 1

问题是您的 #header 开头没有 class swag-style，因此 $("#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;

  });

Answer 2

我知道问题出在哪里了。我有下面的代码块，它添加了 class .swag-style

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

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

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

                }

上面的代码表示.swag-style class在第一次点击触发满足上述条件的滚动后被添加。这反过来又会导致高度发生变化。随后的点击将找到正确的高度。

我通过在点击后立即添加 class .swag-style 的行解决了这个问题，这样正确的高度就会在 [= 之前就位24=] 发生滚动。

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

jQuery scrollTo 只有在第二次点击后才能正常工作

jQuery scrollTo works correctly only after second click

jquery

scrollto