画像を使わずにcssとjavascriptでページ上部移動ボタンを作ってみる

今回はブラウザ限定のカスタマイズです。
右下にある「pagetop」のアイコンが見える方は、firefoxかsafariかchromeを使っている方だと思います。
これをクリックするとページ上部へ移動するのですが、実はこれ、画像は使わずに作成しています。
その方法を解説してみようかと思います。

ではまずcssを書いてみましょう。

#pagetop{
position:fixed;
bottom:100px;
right:0px;
z-index:2000;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
border-top-left-radius:10px;
cursor:pointer;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
font-family: 'Palatino Linotype', 'Book Antiqua3', Palatino6, serif;
font-size:18px;
font-weight:bold;
color:#ffffff;
background:#414141;
padding:0 10px 20px 10px;
-webkit-transform: rotate(-90deg) translate(0px,35px);
-moz-transform: rotate(-90deg) translate(0px,35px);
}

ちょっと長いです。間違えないようにコピペしてください～

次にjavascriptいきましょう。
こちらはフリープラグインに。

<script type="text/javascript">
jQuery("body").append('<div id="pagetop">pagetop</div>');
if(navigator.userAgent.indexOf("Opera") !== -1){jQuery("#pagetop").css("display","none");
}else{
jQuery("#pagetop").click(function(){jQuery("html,body").animate({scrollTop:0},1000);});
}
</script>

これでOKです。
ちなみにFirefoxで見たときが一番きれいに見えます。
お試しアレ！