こんにちは、よろしくお願いします。
皆さんも御存知の固定されたヘッダーを装備してるサイトにありがちな問題。
「ジャンプするとなんかズレる...」
今回、とうとう私にもその日が訪れました。
しかし問題点はすぐに解決され新たな問題が発生し、解決方法が見当たらないので質問をさせていただきます。
URLにAタグのリンク情報が乗らなくなった。。。
固定されたヘッダーに設置されているリンク(ボタン)をクリックすると
URL(リンク)の欄に#bottom1などのページ内で飛ぶAタグのリンク情報が表示されます
しかし固定ヘッダーでのジャンプ時にズレるため下記のコードを使用してズレを無くすと、
jQuery
1<script type="text/javascript"> 2 3$(function () { 4 var headerHight = 10000; //ヘッダの高さ 5 $('a[href^="#"]').click(function(){ 6 var href= $(this).attr("href"); 7 var target = $(href == "#" || href == "" ? 'html' : href); 8 var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす 9 $("html, body").animate({scrollTop:position}, 550, "swing"); 10 return false; 11 }); 12}); 13//https://www.tam-tam.co.jp/tipsnote/html_css/post4776.html 14</script>
原因はおそらく
jQuery
1$('a[href^="#"]')<ここ
ここに「#botton1~5」のAタグ情報を入れると、URLの欄に普通に表示されます。が、、、
本来の目的であるヘッダーの位置ズレの改善が、損なわれてしまいました。
JSかjQueryで「ボタンを押したらAタグの情報をURLに書き込んでね」みたいな仕組みやそれに近いもの、
又は他の、なんらかの対処法はありませんか?
あなたの回答
tips
プレビュー