今日クライアントさんからリンクをクリックした時に
該当の場所が表示されるようにして下さいという指摘をされました。
どういう事かといいますと
http://hogehoge.jp/ というサイトに
http://sample.jp/#company へのバナーを設置していた場合、
バナーをクリックするとhttp://sample.jp/の画面一番上ではなく#companyのある場所が表示されると思います。
Chrome、safari、IEでは問題なく遷移した後に#companyの位置が表示されるんですが
何故かFirefoxだけ画面の一番上が普通に表示されアンカーが機能していない。。。
私は普段Chromeでチェックしながら制作して、最後に他ブラウザでチェックをするんですが
見た目のチェックやJS周りが主でリンクやテキスト内容などは普通問題ないので気にしていません。
なので指摘された時に何を勘違いしてるんだろう?と不思議に思ったのですが
Firefoxで動かなかったときにはorzとなりました。IEですら問題ないのに。。。
検索するとFirefoxのアンカーの挙動は結構おかしい事があるようで
アンカーの位置がズレるという記事が多く見つかりました。
ただ今回の様に遷移した後アンカーが全く効かないというのは見当たらず。
しょうがないのでJSで解決しました。
$(function() { var hash = location.hash; if(hash != "") { var position = $(hash).offset().top; $("html, body").animate({scrollTop: position}, 0); } })
jQueryを使用しています。
内容はURLのプロパティを取得して空じゃなければアンカーの位置までスクロールするというものです。
#company&p=5などの様にアンカー以外にもプロパティが入る場合はアンカーだけを取るなどの工夫が必要になります。
コメント