全ページ共通のナビメニューで、アンカー付きリンクをスムーススクロールさせたい

同じ階層にhoge.phpとfuga.phpがあり、共通のナビメニューとして下記のようなphpをインクルード読み込みしています。
hoge.phpとfuga.phpに下記の通り記述しています。

<?php include_once("./header.php"); ?>

php
1//全ページ共通ナビ header.php
2<header id="header">
3<ul>
4  <li><a href="hoge.php#sec01">hoge-sec01へのリンク</a></li>
5  <li><a href="hoge.php#sec02">hoge-sec02へのリンク</a></li>
6  <li><a href="fuga.php">fugaへのリンク</a></li>
7</ul>
8</header>

このアンカー付きリンクについて、hoge.phpからでもfuga.phpからでもスムーススクロールで移動させたいです。

jsは下記のページを参考にして、ページ外（fuga.php）からhoge.phpのアンカーリンクに飛んだときはスムーススクロールするようになったのですが、
hoge.php内でのアンカーリンクをどうすればいいか分からない状態です。

https://webdesignday.jp/inspiration/technique/jquery-js/4022/

js
1$(function() {
2  /*   - ページ内リンクへの移動
3  /* ---------------------------------*/
4    var headerHeight= $("#header").height() + 50;
5	var urlHash = location.hash;
6	if(urlHash) {
7    $('body,html').stop().animate({ scrollTop: 0 }, 10);
8    setTimeout(function(){
9        var target = $(urlHash);
10        var position = target.offset().top - headerHeight;
11        $('body,html').stop().animate({scrollTop:position}, 500);
12    }, 50);
13	}
14});

実際はページ数がとても多いので、メンテナンス面からナビ自体は共通にしておきたいです。
以上となります。よろしくお願いいたします。

yambejp

2019/02/27 10:07 編集

includeはどうやっているのでしょうか？また#headerはfixedなどして固定しているでしょうか？それともページの先頭部分（？）においてあるだけなのでしょうか？

tekumak

2019/02/27 10:11

すみません、確認したところhtmlではなくphpでした。 phpのインクルード文を使って読み込んでいます。 #headerはfixedで固定しています。

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっとわたしの認識が曲解している気もしますが

javascript
1$(function() {
2  $('#header a').on('click',function(){
3    var href1=$(this).prop("href");
4    var href2=location.origin+location.pathname;
5    if(reg=href1.match(new RegExp("^"+href2+"(#.+)?$"))){
6      $('html,body').animate({scrollTop:$(reg[1]).offset().top }, 500, 'swing');
7    }
8  });
9});