アラフォー独身OL赤裸々生活日記

ぐうたらして過ごしてきてしまった独身女。。キャッシング・借金まみれの生活を抜け出して心機一転!貯金するぞ!! ヨガと韓国ドラマ、海外ドラマ大好きです❤

<Javascript>スクロールするとページトップへ移動するボタンがフェードして表示されるサンプルです

f:id:xxxstarcookiexxx:20140919141532p:plain

最近流行っているこれ
使いなれてしまって、ないページだと結構使い勝手が悪いですよね
記事の多いブログも読むときはすいすいスクロールするのですが
最後まで行くと上に戻るのがちょっと面倒

そんなJavascriptをご紹介!
ぜひぜひ、ご自身のブログに取り入れてみてください
私はフッターに入れちゃっています


f:id:xxxstarcookiexxx:20140919143330p:plain


[デザイン]→[カスタマイズ]
こちらのフッターに

<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]


PAGE TOP