<Javascript>スクロールするとページトップへ移動するボタンがフェードして表示されるサンプルです
最近流行っているこれ
使いなれてしまって、ないページだと結構使い勝手が悪いですよね
記事の多いブログも読むときはすいすいスクロールするのですが
最後まで行くと上に戻るのがちょっと面倒
そんなJavascriptをご紹介!
ぜひぜひ、ご自身のブログに取り入れてみてください
私はフッターに入れちゃっています
[デザイン]→[カスタマイズ]
こちらのフッターに
<br /> <br /> <p id="page-top"><a href="#wrap">PAGE TOP</a></p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script> $(function() { var topBtn = $('#page-top'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script>
上記をコピペして貼りつけちゃってください
上から3行目のPAGE TOPと書いているのが表示される文言なので
ここは自由に変えちゃっても大丈夫です
そして、背景色や文字色サイズ等を指定できる
CSSに下記を追加してください
これもフッターのしたにある<デザインCSS>というところにコピペです
#page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; }
色や文字サイズ等はお好きに変更可能!
ぜひぜひ皆さんも使ってみてくださいね♪
はてなブログ以外でも
JavascriptとCSSが自由に変更可能できるものであれば
(たぶんもうどこのブログでも可能だと思いますが…)
設置可能なものです!
[PR]