みなラボ > WordPress > コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法

1,126views　 2017年03月11日

いつも「みなラボ」にアクセスいただいてありがとうございます！(´∀｀*)ﾉｼ
↓みなラボのFacebookページに「いいね！」はコチラから↓(＞∀＜)ﾉ☆　

↓みなラボのLine@アカウントの友だち追加はコチラから↓Σ(|||▽||| )　

↓みなラボのtwitterアカウントのフォローはコチラから↓(*^▽^*)　
Follow @share_lab
↓みなラボのgoogle+ページのフォローはコチラから↓(∩´∀｀)∩　

↓様々なブラウザで使える「Push7」でみなラボを無料購読するにはコチラをクリック↓(*´ч`*)　

↑お好きなアプリでみなラボの更新通知を受け取ってくださいね！↑＜(_ _)＞　

↓「ブログランキング」と「ブログ村」の2つのランキングに参加しています！クリックで応援していただけると、もの凄く励みになります！↓(∩´∀｀)∩　※右クリック「新しいタブで開く」が非常に便利です♪

※↑それぞれのクリックで「みなラボ」へ1票＆「みなラボ」のランキング状況を確認いただけます！　

220
Tweet
0
Facebook
13
はてブ
0
Google+
2
Pocket
14
Feedly
送る
友達追加

こんにちは！や～べ～です。

今回は、コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法、ということで記事を書いていきたいと思います。

色んなサイトで良く見かける、「ページトップへ戻るボタン」、どうにか自分のサイトにも導入したい！という事で、調べて創ってみました！

まずは、どんな出来栄えなのかご覧ください！

↓こんな感じです。

少しスクロールすると、画面下側左右に「ページトップへ戻るボタン」が表示されます。

このボタンを押すと、ページを遡るようにトップまで戻ってくれます。

では、内容に入っていきます！

※WordPress Twenty Fourteenテーマでの実施内容になります。

目次はコチラ

コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法
HTMLコード
CSSコード
まとめ
おすすめのオンラインスクール
おすすめのレンタルサーバー
ランキング

コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法

スクロールしたら表示される動きと、ページトップまで戻る動きは、実は「jQuery」というスクリプトを使って実現しています。

ですので、まずはその「jQuery」の適用方法から説明していきます。

「jQuery」の適用方法としては、ダウンロードして自サーバーに設置し、そこから読み込む方法と、Googleなどのサーバーに設置してあるファイルを読み込む方法があります。

今回は、後者の「Googleなどのサーバーに設置してあるファイルを読み込む方法」でコードを書きますので、ここでの準備は特に必要ありません。

自サーバー用のコードもコメントアウトして書いておきますので、参考にしていただければと思います。

↓jQueryの適用方法について詳しく書かれたサイトがあります。自サーバーに設置する場合に参考にしてください。

初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001

↓自サーバーに設置される場合は、バージョンにも注意が必要です。
（みなラボは1.x 系を選びました！）

jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など
http://web-pc.net/jquery012

HTMLコード

jQueryの準備ができたら、コードを書いていきましょう！

っとその前に、

編集の前に！

テーマの編集をする前には、必ずバックアップをとっておきましょう！

簡単なバックアップの取り方は↓の記事を参考にして下さい。

簡単！BackWPupでWordPressをバックアップする方法
https://share-lab.net/backwpup1

併せて、簡易的なサイトの復旧方法↓も参考にしてみて下さい。

WordPressバックアップを使ってサイトを復旧する方法
https://share-lab.net/wp-restoration1

（特に、function.phpを編集する時は注意して下さい。編集を失敗すると、画面が真っ白になってブラウザからアクセス出来なくなります。その時は、FTPソフトで復旧します。↑の記事に復旧方法を解説しています。）

では、内容の続きです。

下のコードをfooter.phpの＜/body＞のすぐ上にコピペしましょう！

<!-- 　「ページトップヘ戻るボタン」ここから　　-->

<a href="#top" class="page_top">▲</a>

<a href="#top" class="page_top_2">▲</a>

<!--  JQUERYをグーグルから読み込む場合-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!--  JQUERYを自サーバーへアップロードしたファイルから読み込む場合-->
<!--  <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>-->

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

 $(function() {
 var pageTop2 = $('.page_top_2');
 pageTop2.hide();
 $(window).scroll(function () {
 if ($(this).scrollTop() > 600) {
 pageTop2.fadeIn();
 } else {
 pageTop2.fadeOut();
 }
 });
 pageTop2.click(function () {
 $('body, html').animate({scrollTop:0}, 500, 'swing');
 return false;
 });
 });

 </script>

<!-- 　「ページトップヘ戻るボタン」ここまで　　-->

$(function() {

var pageTop = $('.page_top');

pageTop.hide();

$(window).scroll(function () {

if ($(this).scrollTop() > 600) {

pageTop.fadeIn();

} else {

pageTop.fadeOut();

}

});

pageTop.click(function () {

$('body, html').animate({scrollTop:0}, 500, 'swing');

return false;

});

$(function() {

var pageTop2 = $('.page_top_2');

pageTop2.hide();

$(window).scroll(function () {

if ($(this).scrollTop() > 600) {

pageTop2.fadeIn();

} else {

pageTop2.fadeOut();

}

});

pageTop2.click(function () {

$('body, html').animate({scrollTop:0}, 500, 'swing');

return false;

});

</script>

CSSコード

続いて、CSSの編集です。

style.cssに下のコードをコピペして下さい。

style.cssの下の方に、「Media Queries」とありますので、その直前あたりに記入して下さい。

Media Queriesの設定の無いテーマの場合は、文末で問題ないです。

/* 「ページトップヘ戻るボタン右」ここから */

.page_top {
 position:fixed;
 bottom:10px;
 right:10px;
 width: 50px;
 height: 50px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 color:#fff;
 font-size:20px;
 text-decoration:none;
 background-color: rgba( 36, 137, 13, 0.55 );
 border: 3px solid #ffffff;
 text-align: center;
 line-height: 50px;
	z-index:9997;
 }

/* 「ページトップヘ戻るボタン右」ここまで */

/* 「ページトップヘ戻るボタン左」ここから */

.page_top_2 {
 position:fixed;
 bottom:10px;
 left:10px;
 width: 50px;
 height: 50px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 color:#fff;
 font-size:20px;
 text-decoration:none;
 background-color: rgba( 36, 137, 13, 0.55 );
 border: 3px solid #ffffff;
 text-align: center;
 line-height: 50px;
	z-index:9997;
 }
/* 「ページトップヘ戻るボタン左」ここまで */