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

Question

###前提・実現したいこと
下記のソースについて質問です。#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');
	
});

Answer 1

今提示されているコードだと
$(window).on('resize',fun()){…}の中にスクロールのイベントが入っています。
かつ、.on()でclickイベントを付けている為
ウインドウがリサイズされる度に$('#Area1 a')に対してclickイベントが追加される
という状態です。

試しに$('#Area1 a').on('click', function() { の中にconsole.logを仕込んでみてください。
ウインドウを一度リサイズした後に#Area1 aをクリックするとconsoleに同じメッセージが複数出力されているのではないでしょうか？

カクついている原因はanimate({scrollTop: position})がこの追加された回数呼び出されている為と考えられます。

以上を踏まえて

1. スクロールボタンに該当するコードを$(window).on('resize',fun()){…}から出して$(function)(){…}直下に移動させてみましょう。（変数のpositionも）
2. $(window).on('resize',fun()){…}内にposition = $('#Area2').offset().top;を追記

これでカクつきが消えるのではないでしょうか？

Answer 2

本当に可能ならでいいんですが、上の該当する部分を1枚のhtmlにしてコピペして貼っていただくことは可能でしょうか。