jQueryで画面の固定位置に、ページトップに戻るボタンを設置

Posted on | 2010/8/7 1:11:13

トップページが長いだけに、ページトップに戻るボタンがいるだろうというわけで、横幅1024pxより大きいモニターで見ている人には、多分右下に矢印が表示されていると思います。jQuery使ってます。

HTML

<div id="ttop"><a href="#top" class="page_top" onfocus="this.blur();" onclick="$(‘html, body’).animate({scrollTop: ’0px’}, 300);return false;" title="このページの先頭へ"></a></div>

CSS

#ttop {
position:fixed;
bottom:50px;
left:auto;
margin:0 0 0 1050px;
width:30px;
height:30px;
background:url(http://www.kosukekato.com/images/ttop.gif) no-repeat left bottom;
}
/* IE6以下用 */
* html #ttop {
margin:0 0 -50px 0;
position:relative;
bottom:150px;
left:1050px;
}
#ttop:hover {
background:url(http://www.kosukekato.com/images/ttop_on.gif) no-repeat left bottom;
}
a.page_top {
display:block;
width:30px;
height:30px;
}

position:fixed;なので、どこに挿入してもいいのですが、WordPress的にはヘッダに入れておくのが一箇所で済むので管理便利だと思います。

マウスオーバーの画像はonLoadで先に読み込ませたほうがいいのかなあ。後でやろう。

• 

  意外と知らない、「ヒトリシゴト」。案外、愉快で、楽しいです。気軽に読める、ビジネスエッセイ。

• 

  プランナー、加藤康祐のブログ、kosukekato.com : the idea espressoに掲載したコラム、2006/7/20「歴史は作られている」から2010/5/23「行為が流通するプラットフォームに新しい時代を感じる」を一冊の本にしました。

• 

  今話題のInstagramを使った写真集です！あなたもInstagramするきっかけになれば！68点の写真を収録。