タブコンテンツ以下のページ内リンクは注意(10/04/22修正版)

()
yuga.jsの簡易タブ機能を使ったページを制作したわけですが、

どうやらその簡易タブコンテンツのすぐ下にページ内リンクを設定し、他ページからそこへアクセスすると、意図した場所へ飛んでくれない様子。ずれる。

説明がとてもしづらいけれど、

別にyuga.jsに限らず、大体この手のjsを使ったタブコンテンツは、
フォーカスされたタブの内容だけ目に見える形にしているだけで、それ以外もちゃんと読み込んでいるけれど、見えないようにしているもの。

<!-- タブコンテンツ -->
<ul class="tabNav">
<li><a href="#tab1">タブ1</a></li>
<li><a href="#tab2">タブ3</a></li>
<li><a href="#tab3">タブ3</a></li>
</ul>
<div id="tab1">1のタブ内容</div>
<div id="tab2">2のタブ内容</div>
<div id="tab3">3のタブ内容</div>

<!-- ページ内リンクコンテンツ -->
<div id="box">
愛しさと切なさと心強さと
</div>

↑アクセス時には<div id="tab1">だけ表示させる

アクセス時は、ブラウザの見た目には<div id="tab1">の下にリンク先のコンテンツがあるように見えますが、実際にはソースの通り、<div id="tab3">の下にコンテンツがあります。

つまり、ブラウザを通してみると、<div id="tab2"><div id="tab3">の部分がないように見えています。

しかし、ページ内リンクで他ページからアクセスすると、その2つのdivがあるものとして(この2つのdivの高さ分を計算した上で)位置を計算してしまうようです。

単純に<div id="tab2"><div id="tab3">の高さがそれぞれ300pxあったら、600px分下にリンクされます。

なので、リンク先がずれます。

仕方ないので、<div id="tab2">の中の適当な箇所にid="box"を振ると、まあそれなりに意図した位置にリンクしてくれます。



何を言っているんだかよくわからないかと思いますが、

自分でも説明しててよくわからなくなってきます。

画像も入れつつ説明できたらいいんですが、時間ないです。


備忘録なんで...。


まあこれはほんとやってみて下さいというしかないですね。



※10/04/22追記

どうやら、以上のやり方だとIEでうまくいかない様子。

仕方ないので、jQueryで対処。

$(document).ready(function(ev){
	var myURL = location.href;
	if(myURL == "http://www.hoge.com#contents4"){
		 $('html,body').animate({ scrollTop: 3000 }, 'slow');
	}
});
アクセスしたページがhttp://www.hoge.com#contents4だったら、上から3000ピクセル目の位置にスクロールするという内容。


これでIEもできるようになったんだけど、
でもJSオフにしている人にはどう対処しようってとこです。


タブコンテンツのJSソースを書き換えればうまくいく気がする。


タブコンテンツごとのソースを配列にツッコんで、タブがクリックされたらその内容に差し替えるようにすれば、見えていないコンテンツがなくなり、上記の処置をしなくてもイケそうな気が。
やってみよう。


P.S
花見できない...。
いつになったら終わった感を得られるんだろう...。

戦意

© 2012 戦意