いわしブログ

京都のウィンドミル代表いわしのブログです。wordpressやfacebookの設定、ブログ運営について備忘録代わりに更新してます。最近は動画も作ってます。

*

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

      2015/05/06

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

「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行目付近はこんな感じになります。

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

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

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

#pageTop の background:#98FB98; は、ボタンのベース色を指定しています。color:#ffffff; は、文字「ページトップへ」の色です。
#pageTop:hover の background:#228B22; は、ボタンのハイライト色です。上のサンプルは緑系の色を使用しています。テーマの背景色に合わせて、ボタンも見やすい色に変更してください。

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

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

scrollの数値100は、画面上部から100スクロールするとボタンを表示するということです。数字を変えれば、ボタンが表示されるタイミングを変更できます。
animateの数値1000は、1000ミリ秒かけてページトップに戻るということです。数字を変えれば、ページトップに戻るスピードを変更できます。

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

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

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

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

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

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

さらに、SQUEEZEさん作のjqueryとCSS3アニメーションを用いた、こんな遊び心のある「ページトップへ戻る」ボタンも紹介しておきます。
「ページトップへ戻る」をクリックすると、jqueryによる鉤縄のアニメーションとともに、ページトップに戻ります。普通じゃ物足りないかたはぜひ・・・

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

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

 - jQuery