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

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

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

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

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

↓こんな感じです。

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

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

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

※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を編集すれば、さらに自分のオリジナル色も出せるので、色々と編集してみると良いと思います！

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

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

おすすめのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！

継続更新は、クレジット引き落としで自動更新出来て楽チン！

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！

サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！

サーバーデータの復元も、過去7日以内ならば、「サ－バーパネル」から簡単に操作可能！

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪

ランキング

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

にほんブログ村

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

人気ブログランキングへ