jQuery scroll 使粘性标题跳了一点

Question

我对粘性标题和导航链接有疑问，因为它们都使用 scrollTop 功能。

第一个用于标题 - 当页面滚动到 50 像素后它会缩小。 第二个与导航链接一起使用 - 它使用滚动功能转到特定页面。

问题是当我单击任何导航链接时，我的 Logo 会跳动/闪烁一下，我不确定为什么会这样？我在 JSFiddle 中重现了这个问题(链接如下)，这是代码:

HTML:

<nav>
  <a class="pg1 btn" href="#">Page1</a>
  <a class="pg2 btn" href="#">Page2</a>
</nav>
<article class="home">
  <img class="logoHomePage" src="http://via.placeholder.com/350x150.jpg">
</article>
<article class="page1"></article>
<article class="page2"></article>

jQuery:

// Shrink logo
$(document).scroll(function() {
  if ($(this).scrollTop() >= 50) {
    $(".logoHomePage").addClass("smallLogo");
  } else {
    $(".logoHomePage").removeClass("smallLogo");
  }
});

//nav
$(".pg1.btn").click(function() {
  $("body").animate(
    {
      scrollTop: $(".page1").offset().top
    },
    1200
  );
});

$(".pg2.btn").click(function() {
  $("body").animate(
    {
      scrollTop: $(".page2").offset().top
    },
    1200
  );
});

CSS:

body {
  background-color: red;
  margin: 0px;
  padding: 0px;
}

article {
  width: 100%;
  height: 100vh;
  margin: auto;
}

.logoHomePage {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}

.smallLogo {
  width: 100%;
  max-width: 260px;
  margin: 10px !important;
  position: fixed;
  display: block;
}
nav {
  z-index: 20;
  position: fixed;
  background-color: white;
}

.page1 {
  background: green;
}

.page2 {
  background: yellow;
}

fiddle 引用:JSFiddle

编辑:点击 page1 链接，然后点击 page2 以查看其运行情况。

Answer 1

出现故障是因为页面想要跳转到页面顶部，这是将空 anchor # 作为 href 时的预期行为。它指向页面的顶部。

使用 .preventDefault() 来防止链接的默认行为 (documentation)。像这样:

$(".pg1.btn").click(function(e) {
  e.preventDefault();

  $("body").animate({
    scrollTop: $(".page1").offset().top
  }, 1200);
});

Updated fiddle