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

我尝试过下面建议的解决方案无济于事。

>> stackoverflow

Answer 1

问题是你的#header在开头没有类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类。这反过来会导致高度发生变化。随后的点击将找到正确的高度。

我通过添加下面的行来解决问题，该行在点击后立即添加了类.swag-style，这样就可以在点击触发滚动发生之前找到正确的高度。

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

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

2 个答案: