ホームページ制作　【上に戻るボタン作成】

①フッター</footer>の下にこちらをぶち込む

</footer>　フッターの下に
<p id="scroll-top"><a href="#">^</a></p>　　←これをぶち込む

②次はcss に下記をぶち込む

#scroll-top {
 background-color: #eee;
 opacity: 0.6;
 position: fixed;  /*画面の位置の固定*/
 bottom: 20px; /*下側から*/
 right: 20px;  /*右側から*/
 padding: 10px;  /*内側に余白*/
}

☝　下側から20px、右側から20pxの位置で固定している。

③もう1個css　を追加する。上のcssを記述した下とかに

#scroll-top a {
 text-decoration: none;
 color: #333;
}

これを追加。①で記述した　a の　^　の装飾を変更しています。

④次はJavascript

js　ファイルの中

// JavaScript Document
$(function () {
   


});

この中に書いていく。上の意味はすべてを実行した後にjsを読み込むのでエラーが起きにくい。

// JavaScript Document
$(function () {

//上に戻るボタン（セレクタ）
   let topBtn = $("#scroll-top");
     topBtn.hide(); //画面上の方では意味がないので一回消す。


//ある程度スクロールされたら、上に戻るボタンを表示する
 $(window).scroll(function(){  //windowがスクロールしたらイベント発生
   //console.log($(this).scrollTop());   // スクロール値
   //console.log( $(this).height ());    // 表示されている（見えている高さ）
   
   if( $(this).scrollTop() > 1000){ //スクロール値が１０００を超えたら
      topBtn.fadeIn();　　　　　　　　//フェードインで表示
      }else{
      topBtn.fadeOut();　　　　　　　//フェードアウトで非表示
      }
   
   
//戻るボタンクリックでページスクロール
   topBtn.on("click" , function(event){
     //console.log(event);
     event.preventDefault();  //ページ内リンクの挙動をキャンセル（a のリンクの挙動）
     
     $("body,html").animate({  //スムーズにスクロールする設定　Animetinを使用して
       scrollTop:0　　　　　　　　//３００に値を変えたりするとわかりやすい
     },500);　　　　　　　　　　　　//何秒かけてページトップに戻るのか？1000＝1秒
     });
     
     
   });
   
 });
 
 

これでできるよ