jQuery scrollはスティッキーヘッダーを少しジャンプします

Question

スティッキーヘッダーとナビゲーションリンクに問題があります。なぜなら、両方ともscrollTopの機能を使用しているからです。

最初はヘッダーです。ページが50ピクセル後にスクロールされると縮小します。 2番目はナビゲーションリンクで使用されます。スクロール機能を使用して特定のページに移動します。

問題は、ナビゲーションリンクをクリックしたときに、私のロゴが少しジャンプ/点滅し、なぜ起こっているのかわかりません。私は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をクリックしてください。

Answer 1

ページがページ上部にジャンプしたいので、グリッチが発生します。これは、空のアンカー#をhrefに設定すると予想される動作です。それはページの上部を指しています。

.preventDefault()を使用すると、リンクのデフォルトの動作（documentation）を防ぐことができます。これと同じように：

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

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

Updated fiddle