wordpressでのページ内外のアンカーリンクがうまく作動しない

wordpressでページ内、ページ外のアンカーリンクをスムーズスクロールしたいと思っています。

トップページにid=hogeがあり、
トップページからでも、他ページからでもスムーズスクロールさせたいです。

##現状
ページ外からは希望通りの動きになるのですが、ページ内ではスムーズスクロールされません。
以下現在のコードです。
リンクコード：http://sample.com/#hoge

$(function() {
  var topBtn = $(".back-to-top");
  topBtn.hide();
  $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  topBtn.click(function() {
    $("body,html").animate(
      {
        scrollTop: 0
      },
      500
    );
    return false;
  });
});
$(function() {
  var headerHight = 0;
  $("a[href^=#]")
    .not("[data-lity]")
    .click(function() {
      var href = $(this).attr("href");
      var target = $(href == "#" || href == "" ? "html" : href);
      var position = target.offset().top - headerHight;
      $("html, body").animate({ scrollTop: position }, 550, "swing");
      return false;
    });
});
$(function() {
  var headerHight = 50;
  url = window.location.toString();
  anc = url.substring(url.search("#") + 1);

  if (anc) {
    var Hash = $("#" + anc);
    var HashOffset = $(Hash).offset().top - headerHight;
    jQuery("html, body").animate({ scrollTop: HashOffset }, 1200, "swing");
  }
});

またアンカーリンクの記載はwordpressのカスタムメニューのカスタムリンクからしているのですが、
カスタムリンクをidのみ#hogeにするとページ内でスクロールしますが、
ページ外になると、urlが表示中のページに書き換えられるため、該当しません。

ご教授宜しくお願いします。

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

回答2件

1行目形式がおかしくエラーになっていました。
6行目urlも含んだhrefを取得していたので#の内容のみ取得するようにしました。
どうでしょうか。

javascript
1$("a[href*='#']")//#を'でくくる
2	.not("[data-lity]")
3	.click(function() {
4		if(location.pathname.replace(/^//, '')!==this.pathname.replace(/^//, '') || location.hostname!==this.hostname) return;
5		var href = $(this).attr("href");
6		var target = $(this.hash);//#の要素を取得
7		var position = target.offset().top - headerHight;
8		$("html, body").animate({ scrollTop: position }, 550, "swing");
9		return false;
10	});

投稿2019/06/26 09:11

webgoto

総合スコア1293

Unite-east

2019/06/26 09:23

度々ありがとうございます！ですが、結果は同じでした...。すいません。。

webgoto

2019/06/26 09:32

確認ありがとうございます。ここからはちょっと分かりかねますが、ページ上でF12キーを押すと開発者コンソールを表示できると思うので、そこにエラーが出ていないか確認すると良いかもしれません。

Unite-east

2019/06/27 02:48

コンソールを見ましたがエラーはないようでした。やはり、ページ外からが上手く動作しません。他の方法を探してみます。ありがとうございます。

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

$("a[href^=#]")の部分が^=だとhrefが#から始まらないとならないため、
リンクがhttp://sample.com/#hogeの場合、一致せず実行されません。

下記のように2箇所修正すると、動作するかもしれません。

javascript
1  $("a[href*=#]")//^を*に換え、hrefのどこかに#を持つ場合に実行
2    .not("[data-lity]")
3    .click(function() {
4      if(location.pathname.replace(/^//, '')!==this.pathname.replace(/^//, '') || location.hostname!==this.hostname) return;//リンク先が別のページの場合は終了
5      var href = $(this).attr("href");
6      var target = $(href == "#" || href == "" ? "html" : href);
7      var position = target.offset().top - headerHight;
8      $("html, body").animate({ scrollTop: position }, 550, "swing");
9      return false;
10    });
11});