Sponsored Link

【コピペで完成】JavaScriptを使った上に戻るボタンの作成方法

web制作

こんにちは、げんまるです。

JavaScriptに大苦戦中です…。

ウェブ制作をし始めて間もないですが、HTML/CSSはだんだん理解できる様になってきました。

ですが。。。

JavaScript ⇦この子とまだまだ仲良くなれていません。

ということで今回は、JavaScriptを使った「上に戻るボタン」の作成方法についてご紹介していきます。

web制作初心者の方もコピペすれば動いてしまうのです!

ではさっそくやっていきましょう!

こんな感じの上に戻るボタンがJavaScriptで作れます!

①フッターの下にこちらコードをぶち込む

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

もし上に戻る矢印 ^ がダサいなーっと思ったら上矢印の画像とか入れてもいいと思います。
その際は画像の大きさをcssで指定しないといけませんか…。

②次は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

いろいろ書いてありますがそのままコピーしてペーストしてしまえば大丈夫!

// 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){ //スクロール値が1000を超えたら
      topBtn.fadeIn();        //フェードインで表示
      }else{
      topBtn.fadeOut();       //フェードアウトで非表示
      }
   
   
//戻るボタンクリックでページスクロール
   topBtn.on("click" , function(event){
     //console.log(event);
     event.preventDefault();  //ページ内リンクの挙動をキャンセル(a のリンクの挙動)
     
     $("body,html").animate({  //スムーズにスクロールする設定 Animetinを使用して
       scrollTop:0        //300に値を変えたりするとわかりやすい
     },500);            //何秒かけてページトップに戻るのか?1000=1秒
     });
     
     
   });
   
 });

スクロール値と何秒かけてトップに戻るのかをChromeの検証ツールを使って実験してみてください。

サイトのデザインによって、ゆっくり動いた方がいいのか?早く戻った方がいいのか実際に確かめながら設定してみてくださいね!

まとめ

今回ご紹介したものは、あくまで簡易的な上に戻るボタンになりますので、お好みでない場合は作成しながらいろいろいじってみてくださいね!

タイトルとURLをコピーしました