hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

Facebookページのページタブ内でアンカーリンクを使う

結果からいうと基本はできません。
が、ブラウザにより指定方法を変えれば動く場合もあるみたいです。

これについて、どこ見ても明確な答えが載っていなくて、
調べてたらウチのかわいい後輩がjsdo.itのQ&Aで撃沈したりしていてw
切なかったので書いておきます。

まず「なにいってんのコイツ」と言われそうなので概要。
ページタブ内で普通に別ページへのリンクを貼ると、
ページタブ内で遷移が確認できます。
(index.html内のaタグリンク→index2.htmlへ飛ばすみたいな)

ここでリンク先にアンカーリンクを使うと上手くとばないです。
(index.html内のaタグリンク→#topへ飛ばすみたいな)

これの解決方法を探した結果です。

マズ、基本不可能な理由
通常のサイトだったらアンカーリンク(ページ内リンク)を張っていたらそこに飛びますが、
ページタブ内ではソレが不可能です。
FBページのページタブはiFrameで読み込んでいるので、親フレームのウィンドウの制御は出来ず、
動きません。

ではなぜか奇跡的に動くブラウザはどれか。
実験結果はこちら。

—–
■safari
1)ページトップボタン:◯
2)他ページからのページトップへの遷移:◯

■chrome
1)ページトップボタン:×
2)他ページからのページトップへの遷移:◯

■firefox・IE
1)ページトップボタン:×
2)他ページからのページトップへの遷移:×
—–

1)「ページトップへ」ボタン
「FBpagetabはiFrameで読み込んでいるので、親のウィンドウの制御は出来ず、アンカーリンクは動きません。」
のはずです。
え、普通そうだよね?
でもなぜかsafariだけは動くんです。

例)
http://www.facebook.com/strideyabaland/app_278383545529887
こちらのページ、下部にある「ページトップヘもどるボタン」はsafariだけ動きます。

2)他ページから別ページのページトップへの遷移
さっき例に出した
(index.html内のaタグリンク→#topへ飛ばすみたいな)
は不可能ですが、
(index.html内のaタグリンク→index2.html#topへ飛ばすみたいな)
はsafariとchromeなら可能です。

IEとFFは両方ダメ。

一番良いのは
1)ページトップへボタンはJSでUA制御してsafariだけだす
2)他ページから別ページのページトップへの遷移はとりあえず全ページにつけておく
だと思います。

あと、ページトップへ動かす場合、FBのヘッダを考慮していない場所に飛ぶので、
FBのヘッダがかぶる場合がありますが、あしからず。
それが嫌な場合は上にヘッダの文のマージンを取ればかぶらなくなるかと思います。
ただ、手動で上までスクロールした時に、マージンが気になりますが。

以上。ご参考までに。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください