新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

アンカーリンク(ページトップへ)5つの方法

   

  • このエントリーをはてなブックマークに追加

縦に長いサイトで、メニューが上部にあると、下まで読んでまた上に戻らないと別のページに飛べない。
フレームを使うという手もあるがSEO、SEOといわれている昨今、フレームはとっくの昔に時代遅れになっている。
そこで「ページトップへ」ボタンが活躍することとなる。
(トップページへと混同されやすいので注意。ページの一番上に飛ぶということです)

スポンサーリンク
 

ところがこの「ページトップへ」ボタンが意外と厄介でアンカーを使ったりJavascriptを使ったりといろいろ。
一番手っ取り早いのは「#」にリンクをはる(アンカー指定のないアンカーリンク)ということになるのだが、これではSafariで駄目だという。
だからと言ってhtmlファイルに直接リンクをするのもスマートじゃない。
そこで、アンカーリンクを使うということになるわけですが、これも2種類のやり方がある。
他にもJavascriptを使う方法もあるし。。
ということで、以下に5つの方法と、それぞれの利点、欠点等をまとめた。

1. リンク先に「#」を入れる
一番手っ取り早いのだが、Safariでは動かない。
W3Cの仕様書にも載っていない裏技的な手法。

2. HTMLファイルに直接リンク
解説の必要もないほど簡単で確実。
ただし、いちいち1アクセスとしてカウントされたり、
読み込みに時間がかかったりする可能性もある。

3. アンカーを置いてリンク
もっともスタンダード。ただ、アンカーを設定するのが面倒。
アンカーの場所を微妙に間違えると一行ずれたりする可能性もある。

4. タグ内要素IDに対してリンク
最新のブラウザでは上記アンカーリンクを設定するよりもこっちのほうがスマート。
古いブラウザでは対応していない可能性もある。

5. JavaScriptで動作させる
JavaScriptなので、セキュアな設定では動かない可能性もある。
ただし、面白いアクションをつけたりすることができる。
プログラミングができれば自由自在なところもおススメ。
「このページのトップへ」をJavaScriptで | Bloc Notes
(JavaScriptを使ったページトップへの例)

個人的には「4」または「5」かな。
古いブラウザはもう考えないようにしてます。

最後に、5つのパターンで「ページトップへ」のリンクを入れてみました。
動作確認等にお使いください。

1.ページトップへ
2.ページトップへ
3.ページトップへ
4.ページトップへ
5.ページトップへ

 - ユーザビリティ, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

携帯ブログでもサブドメイン(独自ドメイン)が使えるようになった

ずいぶん前からなのですが、ライブドアブログのケータイ版でサブドメインが使えるよう …

no image
Windows XPのメンテナンス

過去に「Mac OS Xのメンテナンス」といった記事を書いていたので、 Wind …

「Google Reader」のあと何使う?「livedoor Reader」?「Feedly」?それとも「Gunosy」?

先日、ネタにしたように「Google Reader」が7月1日を持って終了するこ …

Facebook(フェイスブック)で大量の誕生日(バースデー)メッセージをもらった時の対処法

さすがにね。 誕生日の日にこんな記事をアップするのもどうかと思ったのでちょっと日 …

Google+からツイッター、Facebookへ同期。「Plusist」

個人的にはツイッターメインなので逆のインフラが欲しいところ。 でも、そろそろGo …

USTREAMが日本語化、生中継の方法を解説

ソフトバンク社長、孫正義氏がツイッター上でやりとりして、「やりましょう」「できま …

Twitpic→Flickr(フリッカー)の連携方法

基本的にFlickr(フリッカー)使いの僕ですが時としてTwitpicも使うこと …

マシンを変えたらFlashの画質が落ちたと言われたときにチェックすること

あるお客さんからマシンを変えたらFlashの画質が悪くなったとの相談を頂いた。 …

Adsense(アドセンス) vs. Pitta!(ピッタ!)収益が高いのはどっち?

9月9日に下記赤い部分にある広告をPittaからアドセンスに変えました。 (ピン …

Windowsキー(Windowsロゴキー)を使った便利なショートカット

先日書いた記事「左下クイック起動アイコンに「デスクトップの表示」を再登録する方法 …