アンカーリンク(ページトップへ)5つの方法
1年以上前の記事です。内容が古い可能性があります。
縦に長いサイトで、メニューが上部にあると、下まで読んでまた上に戻らないと別のページに飛べない。
フレームを使うという手もあるが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.ページトップへ
アドセンス広告メイン
関連記事
-
-
Illustrator(イラストレータ)でアピアランスがいちいち適応されるのを防ぐ方法
1年以上前の記事です。内容が古い可能性があります。せっかくの便利な機能「アピアラ …
-
-
AddClipsを導入してみた
1年以上前の記事です。内容が古い可能性があります。ソーシャルブックマークを始めて …
-
-
ワンクリックアップデートでワードプレス終了。「更新の必要はありません この WordPress のデータベースはすでに最新のものです」と出て先へ進めなくなった時の対処法
1年以上前の記事です。内容が古い可能性があります。いや、ビックリしました。 これ …
-
-
GoogleのいうメールアドレスはGmailじゃない
1年以上前の記事です。内容が古い可能性があります。当社で設定したAnalytic …
-
-
ヘアラインを一つ一つ修正しようとしていたらしい
1年以上前の記事です。内容が古い可能性があります。とんでも現場からこんにちは。 …
-
-
「iPhone」片手で拡大縮小する方法
1年以上前の記事です。内容が古い可能性があります。もう、今年はiPhone(アイ …
-
-
iPhoneでのUSTは電波がバリ5じゃないと映像が止まる恐れあり
1年以上前の記事です。内容が古い可能性があります。何度かiPhoneを使ってUS …
-
-
Facebook(フェイスブック)で誰に友達申請(リクエスト)を送ったか確認する方法【Unfriend Finder】
1年以上前の記事です。内容が古い可能性があります。以前、Facebookで友達リ …
-
-
タスクマネージャーでプロセスを調べてみた(EeePC編)
1年以上前の記事です。内容が古い可能性があります。図に乗ってもう一つタスクマネー …
-
-
これからテレビは3D標準になる 【今週のトピック】
1年以上前の記事です。内容が古い可能性があります。先日、ディズニー映画「ボルト3 …







