JavaScriptで「TOPに戻る」ボタンをスクロールしたら表示する

この記事は、 ブログやWEBサイトの右下にある、「TOPに戻る」ボタンを作成した記事です。

※このブログも作成したボタンを表示しています。

デモはこちら↓

デモの中でスクロールすると、右下にふわっと表示されます。

See the Pen TOPへ戻るボタン by dyna (@sakudyna) on CodePen.

1. 考え方
2. HTML,CSSでボタン描画
3. JavaScript

考え方

以下の手順で考えます。

1.HTML、CSSでボタンを表示

2.JavaScriptで（ボタン）要素の現在位置を取得

3.画面の上からの要素距離を取得し、〇PX以上なら表示、以下なら非表示と設定

4.スクロールイベントで2.3を行う

ではコードを見ていきます。

HTML,CSSでボタン描画

まずはボタンを書きます。


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<div id="page_top">
　<a href="#"></a>
</div>

</div>


#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 10px;
  bottom: 0;
  opacity: 0;
  transition: all 1s ease;
}
#page_top.show {
    opacity: 0.6;
    transform: none;
 }
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 30px;
  color: #A12568;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'TOP';
  font-size: 18px;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #A12568;
}

#page_top{

width: 90px;

height: 90px;

position: fixed;

right: 10px;

bottom: 0;

opacity: 0;

transition: all 1s ease;

}

#page_top.show {

opacity: 0.6;

transform: none;

}

#page_top a{

position: relative;

display: block;

width: 90px;

height: 90px;

text-decoration: none;

}

#page_top a::before{

font-family: 'Font Awesome 5 Free';

font-weight: 900;

content: '\f102';

font-size: 30px;

color: #A12568;

position: absolute;

width: 30px;

height: 30px;

top: -40px;

bottom: 0;

right: 0;

left: 0;

margin: auto;

text-align: center;

}

#page_top a::after{

content: 'TOP';

font-size: 18px;

position: absolute;

top: 45px;

bottom: 0;

right: 0;

left: 0;

margin: auto;

text-align: center;

color: #A12568;

}

今回、Font AwesomeのWebアイコンフォントを使用します。

HTMLのところで


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

と読み込んでいる部分がアイコンフォント読み込み部分です。

あとはCSSで装飾をします。

アイコンフォントをCSSで記載するときは以下のように書きます。


指定したい要素:before(または :after) {
font-family: "Font Awesome 5 Free";
font-weight: 任意の数値;
content: '\ユニコード';
}

//実際のコード例
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
}

指定したい要素:before(または :after) {

font-family: "Font Awesome 5 Free";

font-weight: 任意の数値;

content: '\ユニコード';

}

//実際のコード例

#page_top a::before{

font-family: 'Font Awesome 5 Free';

font-weight: 900;

content: '\f102';

}

無事表示がされたら、JSでスクロール位置をとっていきます。

JavaScript

まず全体のコードを載せておきます。


window.onload=function(){
    let Animation = function() {
    //アイコン位置取得
    let pageTop =  document.getElementById('page_top');

    //要素の位置座標を取得
    let rect = pageTop.getBoundingClientRect();
    //topからの距離
    let scrollTop = rect.top + window.pageYOffset;

    if(scrollTop > 420){
      pageTop.classList.add('show');
     }  else {
      pageTop.classList.remove('show');
     }
   }
      window.addEventListener('scroll', Animation);
 }

window.onload=function(){

let Animation = function() {

//アイコン位置取得

let pageTop = document.getElementById('page_top');

//要素の位置座標を取得

let rect = pageTop.getBoundingClientRect();

//topからの距離

let scrollTop = rect.top + window.pageYOffset;

if(scrollTop > 420){

pageTop.classList.add('show');

} else {

pageTop.classList.remove('show');

}

window.addEventListener('scroll', Animation);

}

ここで重要なのは、要素の位置座標の取得と、スクロールされた縦軸の値（量）の取得です。

要素の位置座標の取得

まずはボタン要素の位置を取得します。

let rect = pageTop.getBoundingClientRect();　のコードがその部分です。

getBoundingClientRect・・・

ターゲット要素の位置を
ブラウザの表示領域の左上を(0, 0)として、そこからの相対位置を取得する

参考：

https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect

スクロールされた縦軸の値（量）の取得

要素の位置が取得されたので、今度はスクロール量を取得します。

そうすると、

「元の要素の位置　+　〇pxスクロール」の場合、ボタンを表示する、

という書き方ができます。

window.pageYOffset　を使用します。

window.pageYOffset は垂直方向のスクロール量を返します。

2つを組み合わせる

この2つを組み合わせると、

もし、「元の要素の位置　+　スクロールされたpx」が420px以上ならば

ボタンを表示

そうでないならば

ボタンを非表示

という形ができます。

実際のコード↓　


  if(scrollTop > 420){
      pageTop.classList.add('show');
     }  else {
      pageTop.classList.remove('show');
     }

if(scrollTop > 420){

pageTop.classList.add('show');

} else {

pageTop.classList.remove('show');

}

表示、非表示はCSSの方で制御してるよ。

CSSの表示・非表示はこちらの記事あります↓

HTML,CSS,Javascript　スクロールしたらふわっと表示(jQueryなし）

javascriptでスクロールしたらふわっと表示させる作り方です。このままコピペしても動くと思います。 jQueryなしで作成しています。

あとは、スクロールイベントで、上記の関数を実行するだけでOKです。

こんな感じでできたでしょうか。

ここまで読んで下さりありがとうございます。

<あわせて読みたい>

初心者向けでわかりやすい、JavaScript勉強におすすめの学習本

プログラミング初心者だったときに、JavaScriptの学習に読んでいた本のご紹介です。初心者向けの記事です。

anime.jsでripple effect(波紋効果)を作ってみたよ

anime.jsの公式サイトに載っているgrid、ripple effectをデモで作成した内容です。

＼ブログ・WEBサイト制作におすすめサーバー／