スティッキーヘッダーでページ内リンクの表示位置がずれた時の調整方法

Sponsored Link

WEBサイトのファーストビューに背景画像のフルスクリーン表示を取り入れた時に下にもコンテンツがあることを分かりやすくするために、ページ内リンクボタンを設置することがあリます。

↓ こんな感じで。

ページ内リンク

この時にスティッキーヘッダーなどをデザインに取り入れて、ヘッダーをposition:fixedで固定表示にしていると、ページ内リンクボタンでジャンプした後の表示位置がヘッダー部分に潜り込んでズレてしまいます。

ページ内リンクの表示位置がずれた時の調整方法

JavaScriptを使えば簡単です。

$(function(){
	$('a[href^=#]').click(function(){
		var speed = 600;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - 80;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
		});
	});

変数positionにoffset().topからヘッダーの高さ(今回は80px)分引いて代入すればOKです。

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。