【jQuery】アンカーリンクでヘッダーの高さ分を除く

Question

前提・実現したいこと

ページ内リンクの際に、jQueryでヘッダーの高さ分を除きたいです。
レスポンシブサイトで、PCとモバイルでヘッダーの高さが変わるので、
ブラウザ幅によって高さを変更したいです。

PCでは170pxでモバイルでは70pxにしたいのですが、どのように記述すればよいでしょうか。
宜しくお願い致します。

該当のソースコード

$(document).on('click', 'a[href*="#"]', function() {
	let time = 500;
	let target = $(this.hash);
	if (!target.length) return;
	let targetY = target.offset().top - 170;
	$('html,body').animate({scrollTop: targetY}, time, 'swing');
	return false;
});

Answer 1

jQueryなら $(window).width(); で画面幅が取得できますので、それを使って条件分岐すればどうですか。

---

解決済みになりましたが、後から気づきました。

ページ内リンクの際に、jQueryでヘッダーの高さ分を除きたいです。

ということなら、ヘッダーの高さを取得してその高さを引けばいいだけですね。
その方が、あとからヘッダーの高さを変更したり、レスポンシブのブレークポイントを変更してもJSの方を変更する必要がないのいいですね。

let targetY = target.offset().top - $('header').height();

Comments

[rightbrain]

ご回答ありがとうございます。
$(window).width();を使用したら思い通りの挙動になりました！
ありがとうございました！

Answer 2

こんにちは。

matchMedia を使ってみては？

window.matchMedia - Web API | MDN

Comments

[rightbrain]

ご回答ありがとうございます。
$(window).width();を使用したら思い通りの挙動になりました！