新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

カーナビの地図更新サービスの無料期間が終わりそうなので地図データをアップデートしてみた(ダウンロード編)

1. ID取得編 | 2. ダウンロード編 | 3 …

タスクマネージャーでプロセスを調べてみた

熱暴走を防ぐには、なるべくマシンに負担がかからないようにしなければならない。 そ …

no image
ウェブ魚拓を拒否する方法

ウェブ魚拓とはサイト情報をキャッシュして残しておくシステムで、 一度書いたブログ …

ライブドアブログのタグは英字の大文字と小文字を区別しない

先ほどのドコモのロゴが変わった記事を書いたときにトラブルが発生しました。

「Windows Media Player」でCDの曲を吸い出す(取り込む)方法

個別授業の生徒さんの知り合いにプロの演歌歌手さんがいて、 その人のイメージムービ …

CSSでWebサイトをセンタリングさせる方法

まあ、今さら感漂いますが一応自分に対しての覚書としてちゃんと残しておくことにしま …

Flickrのクリエイティブ・コモンズは何にすればいいのか? [前編]

Flickr(フリッカー)といえば有名な画像共有サイト。ツイッター連携に強いTw …

GREE(グリー)のiPhoneアプリはログアウトできない?

せっかくGREEのダミーアカウントを取ったのでiPhoneアプリで遊んでみようと …

no image
「explorer.exe」?「explore.exe」?「iexplore.exe」?

間違い探しみたいなタイトルでごめんなさい。久しぶりにタスクマネージャー系の記事を …

「エポックタイム」とはどんな意味?

久々に現場にてperlプログラミングなんぞをやってみましたよ。 とっても新鮮でし …