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

トップページが長いだけに、ページトップに戻るボタンがいるだろうというわけで、横幅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://kkpdo.sakura.ne.jp/kosukekato/wp/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://kkpdo.sakura.ne.jp/kosukekato/wp/images/ttop_on.gif) no-repeat left bottom;
}
a.page_top {
display:block;
width:30px;
height:30px;
}

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

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

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください！
Twitter / Instagram

『ひとり仕事: フリーランスという働き方』 加藤 康祐

posted with amazlet at 15.09.10

(2012-10-5)
売り上げランキング: 14,705
100円

Amazon.co.jpで詳細を見る

フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）