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

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

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

 

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

 

デモはこちら↓

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

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


考え方

以下の手順で考えます。

 

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

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

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

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

 

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


HTML,CSSでボタン描画

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


 

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

HTMLのところで

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


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

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

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


JavaScript

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

 

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


要素の位置座標の取得

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

 

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以上ならば

ボタンを表示

そうでないならば

ボタンを非表示

 

という形ができます。

実際のコード↓ 

 


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

 


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


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

 

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

 

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

 

<あわせて読みたい>

 

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