JS

html

<ul id="page-link">
	<li><a href="#area-1">Area1</a></li>
	<li><a href="#area-2">Area2</a></li>
	<li><a href="#area-3">Area3</a></li>
</ul>

<h1 class="area" id="area-1">テキスト</h1>
<h1 class="area" id="area-2">テキスト</h1>
<h1 class="area" id="area-3">テキスト</h1>

JS

$('#page-link a[href*="#"]').click(function () {
	var elmHash = $(this).attr('href');
	// ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得.

	var pos = $(elmHash).offset().top;
	// idの上部の距離を取得.

	$('body,html').animate({scrollTop: pos}, 500);
	//取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール.

	return false;

});

引用元：https://coco-factory.jp/ugokuweb/move01/8-2-1/