jQuery滚动使粘性标题跳跃了一下答案

【问题标题】：jQuery scroll makes sticky header jump a bitjQuery滚动使粘性标题跳跃了一下
【发布时间】：2017-08-30 20:04:24
【问题描述】：

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

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

问题是当我单击任何导航链接时，我的徽标会跳动/闪烁一会儿，我不确定为什么会这样？我在 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;
}

提琴供参考：JSFiddle

编辑：点击 page1 链接，然后点击 page2 以查看它的实际效果。

【问题讨论】：

标签： jquery html css scroll header

【解决方案1】：

发生故障是因为页面想要跳转到页面顶部，当您将空锚 # 作为 href 时，这是预期的行为。它指向页面顶部。

使用.preventDefault() 阻止链接的默认行为 (documentation)。像这样：

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

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

Updated fiddle

【讨论】：

非常感谢！我不知道#，再次感谢！