ページ右下などに常に 『ページ先頭に戻る』 リンクが表示されるもの。 これまで、「少しぐらい無駄な動きをしてもらう というのも逆にいいんじゃない??」 という思いもあり、設置してはいませんでしたが... ちょっと遊んでみたくなり 実装してみました。
画面右端ではないですが、外枠の右下にピタッとくっついて表示されます。
Sleipnir2, Firefox3, Opera9, (IE8), IE7, IE6, (IE5.5), Google Chrome4 で動作確認済みです。 (IE6 と IE5.5 では ページ一番下までスライドさせた時の状態で 同じように表示されます。 色々試して... これでいいかなと。)
これだけのことをするのに かなり色々と調べたので、参考にした情報の紹介も兼ねて記事に残しておきます。 最終的な私の設定は 遊び的要素 > 機能性 になっていますが、画面右下に固定 とか 枠内に表示とか... アレンジ次第では 使いやすいものになると思います。
常に表示される 「ページ先頭に戻る」 リンクの設定方法
共有テンプレートユーザーさん向けに、私の設定(そのまま)を紹介します。 それ以外のテンプレートでも IE7以上のブラウザ では「入れる場所さえ探せば」簡単に適応すると思いますが... IE6以下の設定部分は テンプレート毎に手直しが必要になると思います。
テンプレートへ追加
<div id="container">
<div id="ttop"><a href="#top" class="page_top" onfocus="this.blur();" onclick="scrollTo(0,0); return false;" title="このページの先頭へ"></a></div>
</div><!--/id=container-->
- テンプレートの一番下辺りにある </div><!--/id=container--> の真上に入れます。(※ari_seoシリーズ の場合です。 その他の場合は、適応する場所を探す...etc)
- href="#top" は javascript OFF の場合用です。 通常のリンクを入れておきます。
- onfocus="this.blur();" は入れなくてもOKですが、クリックした後に 点線 が残るのが気になるので... フォーカスが当たらないようにしています。
- onclick="scrollTo(0,0); return false;" このようにしておくと、javascript ON の状態の場合、ページ先頭に戻る動作の 「履歴」 が残らない (閲覧しているページのアドレスが 「ページ先頭に戻る」 をしても変わらない) 状態になります。
- <a> </a> の間には テキスト を追加してもOKです。(※画像非表示 の場合も考えると、本来はテキストも入れておくのがベストだと思います。)
※ari_seoシリーズ では 「ページ先頭に戻るリンク」 は 単に href="#top" だけを設定しています。 今回、この上のソースを使うのであれば、他の部分も同じように変更するのが自然だと思うので、探せる方は テンプレートの 4箇所 を変更してください。
<a href="#top" title="このページの先頭へ"> ↑ </a> 場所?
<a href="#top" onclick="scrollTo(0,0); return false;" title="このページの先頭へ">↑ ページ先頭へ ↑</a> 場所?
<a href="#top" onclick="scrollTo(0,0); return false;" title="このページの先頭へ">↑ ページ先頭へ ↑</a> 場所?
<a href="#top" onclick="scrollTo(0,0); return false;" title="このページの先頭へ">↑ ↑ ↑</a> 場所?
↑ この4箇所では onfocus="this.blur();" は不要です。 記事タイトル下のリンクは減らしてよいかもしれません。。。お好みで。
スタイルシートへ追加
#ttop {
position:fixed;
bottom:100px;
left:auto;
margin:0 0 0 904px; /* マージン:上 右 下 左 */
width:41px;
height:390px;
background:url(http://・・・・・/t_ptop.png) no-repeat left bottom;
}
/* IE6以下用 */
* html #ttop {
margin:0 0 -390px 0;
position:relative;
bottom:490px; /* 上で設定した ttopの高さ390px+下100px */
left:904px;
}
#ttop:hover {
background-position:0 230px; /* 画像の高さによって適当に調整 */
}
a.page_top {
display:block;
width:41px;
height:390px;
}
- 赤文字部分 が IE6以下では反映されない設定です。 ■色文字部分 は WinIE4~6、MacIE4~5用 の設定になるので、それ以外のブラウザには影響しません。
- IE6 などでのテスト環境が無い場合は、設定が難しいかもしれないので...
* html #ttop { display:none; } だけ設定して、IE6以下 ではその範囲を 表示しないようにしちゃうというのも簡単です。(今回は オマケ的な機能 だと思うので)
- 画像は何でもOKです。(芋虫とかでも可愛い!?) 私の使っている 画像 を使いたい方は DLして加工するなりご自由にどうぞ。 左側の 白(#ffffff)部分を 透過処理 しています。
- 私の使用している画像は 横41px × 縦150px です。 width と height には 使用する画像サイズ以上 を設定してください。
私の設定での欠点
- 左利き(左マウス操作)の方には使いづらい。(・・・と言う以前に、サイト全体が「右利き仕様」です。 左利きの方、ごめんなさい。。。)
- 画面サイズ(ビューサイズ) が小さい状態では このリンクを使えない。 min-width(最小幅) などを設定する方法も考えましたが、不必要に横スクロールバーが表示されるのもイマイチな気がしたので...設定せず。
参考にさせてもらったサイト,他
[ 参考 : ブログが作りたい!
「ページの先頭へ戻る」の常駐表示:CSS小技 ]
[ 参考 : Snow*Materia
expression() > 仮想-position:fixed ]
[ 参考 :
「ページトップへ戻る」リンク・改 - Country Netlife ]
jQuery
[ 参考 : HIMAJIN-JavaScript
リンク画像を右下に固定 ]
javascript
[ 参考 :
IE6でmin-widthを実装する方法のまとめ - Webtech Walker ]
[ 関連 : CSSハックを使わずIEのバグに対処する方法 - [ホームページ作成]All About ]
こういうものを使う際、悩みどころは 「IE6以下への対応」 をどの程度にしようかってことですよね。。。私は、IE6以下では単にページ下に表示 という方法を選びましたが、同じようにしたいという場合、CSSハックや条件分岐,javascript などを上手く組み合わせると、色々な方法が見つかりそうです。
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。