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>
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー