アニメの扉: Bloggerカスタマイズ　

2014年8月5日火曜日

ページトップ戻るボタン

記事や画像が多いページは、スクロールさせるのがとても多く
ホームへ戻りたいときなど大変・・・
そんな時ページトップボタンがあると便利

今回は難しいことはなく、簡単に設置できるものを紹介

デザインはとてもシンプルです

まずはじめに

ボタン設置前に念のため
元のテンプレートのバックアップを取っておきます

テンプレート画面から

バックアップ/復元→テンプレートをすべてダウンロード

ダウンロードしておけば、元のデザイン戻したい時に便利です。

次はボタンの設置

まずテンプレートからHTML編集を選びます

を検索します
・CTRL+Fで探すのが簡単です

見つかったら
の直上に以下のソースコードを貼ります

	<style type='text/css'>
	#PageTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
	</style>
	<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
	<script type='text/javascript'>
	jQuery(function($) {
	$.fn.scrollToTop = function() {
	$(this).hide().removeAttr("href");
	if ($(window).scrollTop() != "0") {
	$(this).fadeIn("slow")
	}
	var scrollDiv = $(this);
	$(window).scroll(function() {
	if ($(window).scrollTop() == "0") {
	$(scrollDiv).fadeOut("slow")
	} else {
	$(scrollDiv).fadeIn("slow")
	}
	});
	$(this).click(function() {
	$("html, body").animate({
	scrollTop: 0
	}, "slow")
	})
	}
	});
	jQuery(function($) {
	$("#PageTop").scrollToTop();
	});
	</script>
	<a href='#' id='PageTop' style='display:none;'>Page Top</a>