レスポンシブ・固定ヘッダー・スムーススクロール【JQ拾い物2】別のページもイケルYo!

固定メニュー、アンカーリンクのズレ解消。
ddと書いてしまうのは私のクセ。治らないToT;;
https://note.com/kobayashi_h/n/n8c443f982a66（前回の記事）

前回ので解消したのはページ内スクロール。
よそのページのアンカーに飛んだら
(ﾟAﾟ ) ずれとるやんけ。というのはわかってましたが、それも解決www
a.html#bにはもちろんうまくいく。
a.html　から　bhtml#b　にも綺麗に飛ぶ。
インターネットバンザ〜イ。90年代はこんなの落ちてなかったもんなぁ〜。
・・・今更ですね。

PC > 768px
.headder_height { height:150px; }

タブレット < 768px
.headder_height { height:100px; }

スマホ < 420
.headder_height { height:80px; }

====================================JS本体
$(function() {

//ヘッダーの高さをcssのクラスで指定
var H_nav = $(".headder_height").height();

//URLリンク先アンカーリンクのヘッダー調整
$(window).on('load', function() {
var url = $(location).attr('href');
if(url.indexOf("#") != -1){
var anchor = url.split("#");
var target = $('#' + anchor[anchor.length - 1]);
if(target.length){
var pos = Math.floor(target.offset().top) - H_nav;
$("html, body").animate({scrollTop:pos}, 500);
}
}
});

//レスポンシブ、固定ヘッダー、スムーススクロール
function pagelink(heightnum) {
var headerH = heightnum;
$('a[href^="#"]').click(function() {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? "body" : href);
var position = target.offset().top - headerH + 1;
$("html, body").animate({ scrollTop: position }, 500, "swing");

//return false;
});
}
pagelink(H_nav);
});
====================================以上。
このおかげで、今日はさらにハッピーだwww

//うまく動かなかったらidで高さ指定をclassにしてくださいね。