コピペOK!スクロールすると出現するトップへ戻るボタンの設置方法／jQuery

いまやトップへ戻るボタンは必ず設置されている欠かせない機能のひとつですね。
HTMLの授業を習い始めの頃はアンカーでトップへジャンプさせる方法を習いますが、
もうすこしカッコイイ動きのある「トップへ戻るボタン」を設置したくなりました。
条件としては、

・下へある程度ページをスクロールしたところでふわっとボタンが出現する。
・上へのボタンを押すと同ページの一番上へスーっとスクロールし戻る。

そんなボタンの設置方法を調べていると、HTMLだけではなく
jQuery（ジェークエリー）というものを使って動かす必要がありました。
実際にチャレンジして動くようになりましたのでその方法をご紹介します。

設置手順1：jQueryの準備をして読み込む

まずはjQueryを動かすためにサイト内で読み込ませるファイルは
「jQuery本体」と「jsファイル」です。
この2種ファイルを、bodyの閉じタグの前に追加して本体を読み込ませます。

以下のコードをhead内に追加します。

<script src="js/jquery-3.4.1.min.js"></script>　 /** スクリプト読み込み **/

設置手順2：スクリプトを読み込む

こちらはボタンの動きの部分です。

<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が350を超えた場合
       if ($(this).scrollTop() > 350) {
           $('#pagetop').fadeIn();
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut();
       }
   });
   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
})(jQuery);
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

設置手順3：HTMLを記述する

次にボタンを設置するためにHTMLをbodyタグ内に記述しましょう。

<a id="pagetop" href="#top" class="page_top" style="display: none;"><img src="image/modoru.png" alt="戻る"　align="right" ></a>

設置手順4：CSSで見た目を整える

以下のスタイルを追加します。
僕の場合は上記のHTMLで<img src=画像.png>で画像を読み込んでいるので
文字サイズや色に関しては意味がありませんが一旦入れておいています。

/* トップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:50px;
    right:30px;
    color: #ffffff; /* 文字色 */
    font-size:0px;
    text-decoration:none;
    background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
	);
	background-size: 0px 0px; 
	border-radius: 50%; /* ボタンの丸み */
	opacity: 1.0; /* ボタンの透明度 */
	z-index: 99;
}
/* トップへ戻るボタン：ホバー時 */
#pagetop:hover {
    color: #ffffff; /* 文字色 */
    opacity: 0.7; /* ボタンの透明度 */
}
#pagetop img {
 	width:100px; /* ボタンのサイズ */
 	height:100px;
}

以上、これで保存してブラウザで確認すると、
スクロールして出現するトップへ戻るボタンが設置できました。