アンカーリンクのズレを無くしたいです。

Question

pc.spでjsの読み分けをしています。
pcのみアンカーリンクされた時の表示が、読み分けをしていない時と比較するとズレてしまっています。
このズレを無くしたいです。
もともとsp,pcと分かれていた物を合体させた際になってしまいました。
htmlをpc単独だったものに入れ替えると正しいままなのでjsがどこか噛み合ってしまっているのだと思っています。

該当のjsソースコード

▼pcの時
function ancFunc() {
// #で始まるアンカーをクリックした場合に処理
$('#local-nav a, .to-anc').on('click', function(){
// アンカーの値取得
var href= $(this).attr("href");
if (href != '#') {
// スクロールスピード
var speed = 400;
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
if (target.length == 0) return false;
var position = target.offset().top - 185;
// スムーススクロール
$('body, html').stop(true, true).animate({
scrollTop: position
}, speed, 'swing');
}
return false;
});
}

▼spの時
function ancFunc() {
var nav_pos = $('#gnav_sp').offset().top;
// #で始まるアンカーをクリックした場合に処理
$('a[href^="#"]').on('click', function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = 0;
if(target.offset().top <= nav_pos) {
position = target.offset().top;
} else {
if($('#gnav_sp').hasClass('fixed')) {
position = target.offset().top - ($('#gnav_sp').outerHeight() * 1);
} else {
position = target.offset().top - ($('#gnav_sp').outerHeight() * 2.75);
}
}
$("html, body").animate({ scrollTop:position }, speed, "swing");
return false;
});
}

▼出し分けの記述
<script type="text/javascript">
jQuery(document).ready(function($) {
//PC環境の場合
if (window.matchMedia( '(min-width: 678px)' ).matches) {　//切り替える画面サイズ
$.ajax({
url: './script_sp.js?ver=190606',
dataType: 'script',
cache: false
});
} else {
$.ajax({
url: './script.js?ver=190606',
dataType: 'script',
cache: false
});
};
});
</script>

Comments

[hoshi-takanori]

もしかして、PC 画面の時に script_sp.js を読み込んでませんか？

Answer 1

下記の部分で、PCの方だけスクロールの位置を−１８５としてあるので、

var position = target.offset().top - 185;

ヘッダの高さ分か何か引いてるんだと思いますが、
このあたりが怪しそう…
HTMLやCSSも書いていただかないとなんとも言えませんね。

Comments

[caaaan]

ありがとうございます、おっしゃる通りヘッダーの高さ分調整の記述です。
cssで数値の調整をして解決できました！

[退会済みユーザー]

解決できたのことで良かったです^^