FC2ブログでページトップへ戻るボタンを実装する方法

  • LINEで送る

当サイトの「ページトップへ戻るボタン」は、画面右下に表示されるように設定しています。画面をある程度下へ進むと現れて、クリックすると、スルスル~っとページの一番上にスクロールしながら戻ってくれる便利な機能です。

この、スルスル~っとスクロールする動きは「スムーズスクロール」というんですよ♪

ページトップへ戻るボタン

今回はjQuery(ジェイクエリー)を読み込んでスムーズスクロールさせる方法で実装していきます。jQueryとは・・・と解説し始めてしまうと難しくなってしまうので省略します。
(というか私に詳しく説明できるほどの知識がありません・・・)

ブログ初心者さんでも実装できるように、これをここにコピペすればOKですよ~、と簡単にご紹介したいと思います。詳しく知りたい方はご自身でお調べになってくださいね。

ページトップへ戻るボタンの実装ついてはNxWorldさんの記事が大変参考になりました。7タイプの動きと、CSSでデザインされたシンプルなボタンで実装する方法です。
jQuery:スクロールで表示されるページトップの実装方法

当サイトでは、NxWorldさんの記事「2.フェードで出現 #2」(当サイトと同じ表示形式です)に少し手を加えて、コピペするだけで実装できるようにしてみました。

作業は必ずテンプレートのバックアップを取ってから行ってくださいね。

jQueryの読み込みとスムーズスクロールの記述をする

下記のコードをテンプレートのHTMLソース内にある</head>のすぐ上にコピペしてください。
【参考】FC2ブログテンプレートの編集ページ

<!--▼▼ jquery読み込み ▼▼-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--▲▲ jquery読み込み ▲▲-->

<!--▼▼ スムーズスクロールの記述 ▼▼-->
<script type="text/javascript">
$(document).ready(function() {
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 700) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});
	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});
</script>
<!--▲▲ スムーズスクロールの記述 ▲▲-->

他の動作に変更したい場合は、7~20行目をNxWorldさんの記事内に記述された他のjQueryと差し換えればOKです。jQueryを差し換えるときはCSSも合わせて差し換えることをおすすめします。

また、ある程度記事が長くないとボタンが表示されないのでお気を付けください。上記コードの「700」と記述された数値を小さくすると早く表示されるようになります。

ページトップへ戻るボタンのCSSを追加する

下記のCSSをテンプレートのCSSの最下部にコピペしてください。

/* ▼ ページトップへ戻るボタン ▼ */

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;             /* ボタン表示位置(下の余白) */
	right: 55px;              /* ボタン表示位置(右の余白) */
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;    /* 背景色 */
	border-radius: 50px;
	text-align: center;
	color: #fff;               /* 文字色 */
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
}

/* ▲ ページトップへ戻るボタン ▲ */

他のボタンデザインに変更したい場合は、NxWorldさんの記事内に記述された他のCSSと差し換えればOKです。CSSを差し換えるときはjQueryも合わせて差し換えることをおすすめします。

ページトップへ戻るHTMLソースを記述する

1)テンプレートのHTMLソース内にある<body>を下記のソースと差し換えてください。(id=”top”を追加しています。)

<body id="top">

2)下記のソースをテンプレートのHTMLソース内にある</body>のすぐ上にコピペしてください。

<p class="pagetop"><a href="#top">▲</a></p>

以上のことを実践したらページトップへ戻るボタンの実装ができているはずです。お疲れ様でした!

line

  • LINEで送る