2016年11月29日

他ページからのアンカーリンクで指定のIDからずれる

同じディレクトリ内のページから、他ページのアンカーリンク先に飛ばすことは基本中の基本ですが、
作成していたサイトにて、指定のページに飛ぶことは飛ぶが、これまただいぶずれた位置に飛んでいく・・・
ネガティブマージンを使用してるのがいけないのかどうなのか・・・

他ページからのアンカーリンクで指定のIDからずれる
もっとあっちに飛ばしたい・・・

通常idにアンカーリンク先を作るのですが、a nameなど基礎的な対応をしてもだめ。。
それらを入れてもIEやChromeは飛んでくれてもFirefoxは言うことを効いてくれず。

原因を消去法で探っていくと、どうやらjquery.matchHeight.jsのようでした。
これは要素の高さを揃えてくれるのにとても便利なプラグインで重宝していますw

ところがこちらを使用して揃えた分がずれを生じさせているようでした。
特にJSが得意なわけはないので回避策を調べていると、アンカーリンク先のページで
offset().top を取得し scrollTop で移動させればよいとのこと。

ページ遷移後に特定箇所へスムーズスクロールさせればOKかなと。

実装例は下記となります。参考程度にしてください。

1.リンク元の01.html
------------------------------------------------------------------------
<a href="02.html?id=aaa">AAA</a>
<a href="02.html?id=bbb">BBB</a>
<a href="02.html?id=ccc">CCC</a>
------------------------------------------------------------------------
※「<」は「<」に変更しています

2.飛び先の02.html
------------------------------------------------------------------------
<div id="aaa">
コンテンツ項目
</div>

<div id="bbb">
コンテンツ項目
</div>

<div id="ccc">
コンテンツ項目
</div>
------------------------------------------------------------------------
※「<」は「<」に変更しています
※大きな画像などがある場合、高さを正しく取得できない場合があります

3.jQuery
------------------------------------------------------------------------
$(window).on('load', function() {
var url = $(location).attr('href');
if(url.indexOf("?id=") != -1){
var id = url.split("?id=");
var $target = $('#' + id[id.length - 1]);
if($target.length){
var pos = $target.offset().top;
$("html, body").animate({scrollTop:pos}, 1500);
}
}
});
------------------------------------------------------------------------
※jQueryの読み込みは必須です


この限りではありませんが、同じお悩みの方がいらっしゃったら、お試しください。




posted by ガーネッツ at 22:13 | Comment(0) | お仕事 | このブログの読者になる | 更新情報をチェックする