jquery、ページ内スクロール、ページ外スクロール実装コード

ページ内外でぬるっと動くあのスクロール 私の中では決定版のコードができたのでこちらに書いてみます。 各種サイトさんからのコピペを改変して時分用にしてます。 先人たちに感謝！

/*ページ外スクロール*/
//URLのハッシュ値を取得
var urlHash = location.hash;
var header_size = 60;
//ハッシュ値があればページ内スクロール
if(urlHash) {
//スクロールを0に戻す
	$('body,html').stop().scrollTop(0);
	setTimeout(function () {
	  //ロード時の処理を待ち、時間差でスクロール実行
	  scrollToAnker(urlHash) ;
	}, 100);
}
function scrollToAnker(hash) {
	var target = $(hash);
	var position = target.offset().top-header_size;
	$('body,html').stop().animate({scrollTop:position}, 500);
}

/*ページ内スクロール*/
$('a[href*="#"]').on('click', function () {
	var href = $(this).attr("href").substr( $(this).attr("href").indexOf('#') );
	var target = $(href == "#" || href == "" ? 'html' : href);
	if(target!=undefined){
		var position = target.offset().top-header_size;
		$("html, body").animate({scrollTop: position}, 500, "swing");
	}
	return false;
});

ポイント

ページが読み込まれた際「location.hash」にてURLに＃がついているかの判定を行い ＃がついているのであれば、指定先までスクロールさせる。

var urlHash = location.hash;
if(urlHash) {
以下略

ページ内移動の場合は、a hrefのクリックを読んでスクロール

$('a[href*="#"]').on('click', function () {
以下略

私の作るサイトでは大概ヘッダー部がposition: fixed;になっているので その分の高さをここで指定

var header_size = 60;

雑な解説ですこんな感じです。

追記 2021.04.05

上手く動かないなーと思ったら、 $(function(){ }); で囲ってなかった。。。 これを反省として追記する。