アンカーリンク(ページトップへ)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.ページトップへ
アドセンス広告メイン
関連記事
-
-
有料会員じゃないと見れないCOOKPAD(クックパッド)の人気順レシビをGoogleの検索結果で見る方法
1年以上前の記事です。内容が古い可能性があります。COOKPAD(クックパッド) …
-
-
WordPress(ワードプレス)のURL表記をHTML表記にする方法 #wp
1年以上前の記事です。内容が古い可能性があります。牛歩戦術でゆっくりと進んでいる …
-
-
親が倒れたらまずは介護保険の要介護認定をとろう
1年以上前の記事です。内容が古い可能性があります。こちらの記事の続きです。 とい …
-
-
4月~6月の残業は損。「社会保険料」が高くなる可能性
1年以上前の記事です。内容が古い可能性があります。へぇぇ。こういうカラクリがあっ …
-
-
googleストリートビューがケータイ(携帯電話)対応
1年以上前の記事です。内容が古い可能性があります。□Googleの「ストリートビ …
-
-
長距離高速深夜バス(夜行バス)に電源が付いているかどうかは座席の列数で判断。3列は付いている可能性大
1年以上前の記事です。内容が古い可能性があります。京都に来ています。
-
-
Photoshopでスライスをまとめて削除する方法
1年以上前の記事です。内容が古い可能性があります。これ、生徒さんに聞かれてすぐ答 …
-
-
Twitter(ツイッター)でフォロワーさんの出入りが分かる「人事ったー」
1年以上前の記事です。内容が古い可能性があります。こんなサービスあったんですね。 …
-
-
さくらインターネットで403及び404エラー表示をカスタマイズ
1年以上前の記事です。内容が古い可能性があります。以前、自宅サーバーでやっていた …
-
-
これからテレビは3D標準になる 【今週のトピック】
1年以上前の記事です。内容が古い可能性があります。先日、ディズニー映画「ボルト3 …







