はてなブログにjQueryのスクロールでtopへ戻るボタンを導入するソース

こんばんは。

そのうち勉強しようとか随分前から思ってたのですがここに来てやっと勉強する気になりました。jQuery。

とりあえず一番簡単そう（数行で完結）で、サイトを作るにあたってよく使うであろうスクロールでtopへスルスルッと戻るボタンを作りましたのでメモ。

デモはこのブログの右下にある角丸で四角のボタンになります。マウスホバー時にうっすら濃くなるcssも付けました。親切設計ですねｗ

まずは何をするにもjQuery本体がないと動きません。

はてなブログのデザイン＞カスタマイズ（タブ）＞フッタ　に下記のソースを貼り付ける。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

同じ場所に下記のjQuery・css・htmlを置く。

▼jQuery

$(function(){
     $(".scrolltop").click(function(){
     $('html,body').animate({ scrollTop: 100 }, 'slow');
     return false;
     })
});

▼css

.scrolltop {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    display: block;
    position: fixed;
    bottom: 30px;
    right: 15px;
    -webkit-transition: 0.2s linear;
    -webkit-transition-property: all;
    -moz-transition: 0.2s linear;
    -moz-transition-property: all;
    -o-transition: 0.2s linear;
    -o-transition-property: all;
    transition: 0.2s linear;
    transition-property: all;
}
.scrolltop:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
}

▼html

<a class="scrolltop" href="#">
  <img src="/scrolltop_black.png" alt="topへ戻る" />
</a>

画像のリンク先は各自変更してください！
しかしせっかく導入したSyntaxHighlighter…はてなブログだとキーワードリンクに認識されるので使えないなぁ・・・有料のはてなブログにすべきか。。

それではまた。