jQueryで「ページトップへ戻る」ボタンを追加

スポンサーリンク

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

jQueryを使ってブログに「ページトップへ戻る」ボタンを追加する方法をご紹介します。

縱に長いホームページは、いちいちスクロールさせるのが面倒ですし、メニューやボタンは大抵ページの先頭なので、「ページトップへ戻る」ボタンをつけると便利ですよ。

jQueryを使って「ページトップへ戻る」ボタンを追加

縱に長いホームページは、いちいちスクロールさせるのが面倒です。他のページに飛ぼうとしても、メニューやボタンは大抵ページの先頭で、戻るのが大変ですよね。

「HOME」キーや「PageUp」キーがあるじゃねーか!!

はい、仰る通り・・・でも、みんなあんまり知らないでしょ。

というわけで、Kowappaさんの記事を参考にして、jQueryを用いた「ページトップへ戻る」ボタンをつけることにしました。Kowappaさん、ありがとうございます。

http://kowappa.com/webdesign/pagetop

たったの10秒でできる!jQueryで実装する「ページトップへ戻るボタン」 – Kowappa

今回は、WordPressのブログテーマ「twentytwelve」に「ページトップへ戻る」ボタンを埋め込むという前提で解説します。他のテーマでもやり方は大体同じですが、細部はそれぞれのテーマに合わせて変更してください。

「ページトップへ戻る」ボタン footer.phpに追記

まずはfooter.phpの13行目にある </div><!-- #main .wrapper --> の手前に <a id=”pageTop” href=”#main”>ページトップへ</a> を追記します。13行目付近はこんな感じになります。

?>
<a id="pageTop" href="#main">ページトップへ</a>
	</div><!-- #main .wrapper -->
	<footer id="colophon" role="contentinfo">

href=”#main” の”#main”は、一番最初のメインコンテンツ表示領域の<div id>を指定してください。

「twentytwelve」の場合はヘッダの一番最後にある <div id=”main” class=”wrapper”> を指定します。一番最初のメインコンテンツ表示領域の<div id>はテーマによってそれぞれ違うので、それに合わせて変更してください。

「ページトップへ戻る」ボタン CSSに追記

次は、以下をCSSに追加します。いわしはstyle.cssの679行目にある「Main content and comment content」のすぐ下に追記しました。

/* =Main content and comment content
-------------------------------------------------------------- */

#pageTop{
    background:#98FB98;
    border-radius:5px;
    color:#ffffff;
    padding:20px;
    position:fixed;
    bottom:20px;
    right:20px;
    }
#pageTop:hover{
    background:#228B22;
    }

#pageTop の background:#98FB98; は、ボタンのベース色を指定しています。color:#ffffff; は、文字「ページトップへ」の色です。

#pageTop:hover の background:#228B22; は、ボタンのハイライト色です。上のサンプルは緑系の色を使用しています。テーマの背景色に合わせて、ボタンも見やすい色に変更してください。

「ページトップへ戻る」ボタン JavaScriptファイル

続いて、テキストエディタで「pagetop.js」ファイルを作成します。中身は下記のコードをそのまま記入してください。

<script type="text/javascript">
$(function() {
	var topBtn = $('#pageTop');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1000);
		return false;
    });
});
</script>

scrollの数値100は、画面上部から100スクロールするとボタンを表示するということです。数字を変えれば、ボタンが表示されるタイミングを変更できます。

animateの数値1000は、1000ミリ秒かけてページトップに戻るということです。数字を変えれば、ページトップに戻るスピードを変更できます。

「ページトップへ戻る」ボタン JavaScriptのアップロード

最後はJavaScriptのアップロードです。まずは作成した pagetop.js ファイルを「index.php」と同じ場所にアップロードします。続いて、JavaScriptの読み出しコードをヘッダに追記します。

<script type="text/javascript" src="http://自分のアドレス/pagetop.js"></script>

twentytwelveの場合は、26行目の <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” /> の下に追記します。26行目付近はこんな感じになります。

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script type="text/javascript" src="http://自分のアドレス/pagetop.js"></script>
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>

はい、これで右下に「トップに戻る」ボタンが付きました。スマホやタブレットでもちゃんと表示されます。

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

遊び心のある「ページトップへ戻る」ボタン

さらに、SQUEEZEさん作のjqueryとCSS3アニメーションを用いた、こんな遊び心のある「ページトップへ戻る」ボタンも紹介しておきます。

「ページトップへ戻る」をクリックすると、jqueryによる鉤縄のアニメーションとともに、ページトップに戻ります。普通じゃ物足りないかたはぜひ・・・

http://squeeze.jp/blog/web-design/ninja-pagetop/

【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE – Web Design Studio –

スポンサーリンク
PC用
PC用

フォローする

コメント

  1. タカボロン より:

    ご教示のとおりに実装しましたが、ページトップボタンが消えず、表示しっぱなしになります。
    スクロール速度も全く効きません。
    また、IE10ではOKですが、FIREFOX、CHROMEではジャンプ失敗します。

    http://jtec.co.jp/work/

    コメント頂けると助かります。

コメントの入力は終了しました。