よく最近のHPなどでは、下にスクロールをすると右下などにひょこっと矢印などが出て、
クリックすると一番上まで画面を持って行ってくれるものがありますよね!
それをアメブロにもつけてしまおうということで、、、
まず右下に既に居る方をなくしてしまいましょう。
まずはCSSに下記を貼り付けます。
.footerNav {
display: none ! important;
}
これでとりあえず消してしまいましょう。
ちなみに余談ですが、この「次へ」とか、必要?笑
次へを押したい人は大体記事を読んでくれている人なので、記事には次へがあるので、
不要では?w
僕は不要なので、下記で進めますね。
<script type="text/JavaScript">
<!--
$(function(){
$('#pagetop').hide();
// スクロール
$(window).scroll(function(){
// ユーザーの画面の位置がスクロールによって200を超えた場合 「トップへ」をフェードイン
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
}
// 位置が200以下の場合、 「トップへ」をフェードアウト
else {
$('#pagetop').fadeOut();
}
});
// 「トップへ」をクリックした時にトップにスクロール
$('#pagetop').click(function(){
$('html,body').animate({
scrollTop: 0
}, 3000);//スクロール速度は左の数値を変えてください(3000=3秒)
return false;
});
});
//-->
</script>
上記がスクリプト部分です。
上記をフリープラグインへ挿入します。
続いて、下記のHTMLをフリースペースやプラグインに挿入します。
<p id="pagetop"><a href="#">ページの一番上へ</a></p>
そんで下記CSSをブログ用のCSSに挿入します。
(これは画像を用いたリンクとしています。)
#pagetop {
bottom: 0px; /*下からの位置*/
right: 10px; /*右からの位置*/
height: 80px; /*要素の高さ*/
width: 85px; /*要素の幅*/
position: fixed; /*ポジション:固定*/
text-indent: -9999px; /*文字消去*/
}
#pagetop a {
background: url("画像URL") no-repeat scroll left top transparent;
display: block;
height: 80px;
}
これで完璧bb
画像はよかったらコレ使ってください。
※保存して各自でUPしてご利用ください。
ぜひ一度お試しあれ!