ブラウザの大きさを変えるとカクカクしながらスクロールしてしまう

前提・実現したいこと

下記のソースについて質問です。#Area1内にあるアンカータグをクリックすると画面が
「#Area2」と「#Area3」へスクロールするのですが、
スクロールをする前にブラウザの大きさを変更すると、変更する前と比べ円滑にスクロールしなくなりカクカクしながらスクロールしてしまいます。なぜ、ブラウザの大きさを変えるとカクカクするようになるのでしょうか。
また、アンカーのhrefは、#Area2で最適なのでしょうか。

該当のソースコード

<!-- 最上部 -->
<div id="Area0">

</div>
<!-- ★ブラウザの大きさと連動するボックス(ファーストビュー) -->
<div id="Area1">
11111111111111111

<a href="#Area2">scroll</a>


</div>
<div id="Area2">
2222222222222222
</div>
<div id="Area3">
3333333333333333
</div>

#Area0 {
    background: gray;
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
#Area1 {
    background: lightpink;
    width: 100%;
    position: fixed;
    z-index: 0;
}
#Area2 {
    background: blue;
    width: 100%;
    height: 450px;
    position: relative;
}
#Area3 {
    background: green;
    width: 100%;
    position: relative;
    height: 450px;
}

$(function() {
    $(window).on('resize', function() {
    var h = $(window).height();    
    $('#Area1').css({'height': h, 'margin-top': 70});
    console.log('高さ:',h);    

    $('#Area2').css('top', h);
    $('#Area3').css('top', h);

//■スクロールボタン
var position = $('#Area2').offset().top;
console.log('#Area2とブラウザの幅:', position);
$('#Area1 a').on('click', function() {    
    $('html,body').animate({
        scrollTop: position
    }, {
        queue : false,
        duration: 3000
    });
});
    }).trigger('resize');

});