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

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

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

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

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

↓こんな感じです。

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

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

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

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

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

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

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

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

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

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

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

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

jQueryプラグインの設置方法
https://blog.raizzenet.com/installation-of-jquery-plug-ins/
初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001

HTMLコード

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

っとその前に、

 
では、内容の続きです。

下のコードを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>

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

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;
 }
/* 「ページトップヘ戻るボタン左」ここまで */

 
参考にさせていただいたサイト

 
【WordPress】プラグインを使わずにページのTOPへ戻るリンクを設置してみた。
https://takayakondo.com/page-top-link/

まとめ

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

色んなサイトで良く見かける、「ページトップへ戻るボタン」コピペで簡単に設置することができたと思います。

 
クリック一発でトップページまで戻れ、サイトの使い勝手も向上すると思いますので、まだ設置されてない方はぜひ設置してみてくださいねっ！

CSSを編集すれば、さらに自分のオリジナル色も出せるので、色々と編集してみると良いと思います！

 
じゃあ、今回はここまでっ！！

ではではっ！(´∀｀*)ﾉｼ

WordPressサーバーならエックスサーバーがおすすめ！

 
『XSERVER』

僕の運営しているサイト、ブログの多くはこの『XSERVER』を使っています！＾＾

月額最安900円（税別）で200GBのサーバー容量を確保でき、サーバーダウンなどがほぼ皆無で安定稼働されており、サイト表示速度（処理速度）も速く、読み手のストレスを最小限に留めることが期待できると思います！

さらに、サーバー側で自動バックアップを取ってくれていて、7世代に遡って復旧できるので、もしもの時にもかなり安心できると思います！

サーバーの様々な設定で使用する「サーバーパネル」がほぼ日本語で、ヤフーのトップページのような日本的な階層表示になっているので、他のサーバーのものよりも使いやすいのではないかと個人的には思います。
（※他サーバーでは、まんま横文字のみの専門用語的アルファベットのみの項目があって分かり辛かったり、階層のグルーピングがピンと来ないような感じになっていて分かり辛いこともありました。。。）

ランキング

 
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！

にほんブログ村

 
↓こちらもお願いしますっ！

人気ブログランキングへ