ページ外からページ内リンク時スムーススクロールさせる

サンプルはこちらから
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

<script>
var headerHeight = $('header').outerHeight();
var urlHash = location.hash;
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, 500);
    }, 100);
}
$('a[href^="#"]').click(function() {
    var href= $(this).attr("href");
    var target = $(href);
    var position = target.offset().top - headerHeight;
    $('body,html').stop().animate({scrollTop:position}, 500);   
});
</script>

fixedなどでヘッダーを固定している場合ヘッダーの高さを取得して、スクロールの際ヘッダーの高さ分マイナスしています。

ヘッダーを固定していない場合、var headerHeight = $(‘header’).outerHeight();と – headerHeight;は特に必要ないです

ページ外からスムーススクロールする際、ページ内リンクをハッシュではなく「?=○○」としているサンプルを見ますが、通常どおりページ内リンクは「#○○」でOK。です