2022 3/22 「トップに戻る」ボタンを実装したいんだけど、どうやればいいんだろう? 悩んでいる人「トップに戻る」ボタンをJavaScriptで実装してみたい! 本記事では、上記の悩みを解決します。 本記事の信頼性 30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。 WEB制作やECサイトの構築をしていると、頻繁にご依頼を受けるのが「トップに戻る」ボタンの実装です。 調べると多くの方が解説している記事があるので、今までよくわかんないけどなんとなくコピペで動いたしいいやーという人も多いんじゃないでしょうか?(学習初期の僕…) 今回は、コードの解説もしながら理解を深めてもらい、ご自身の力で実装できるようになってもらえるように解説していきます。
本記事の内容
目次 トップに戻るボタンの実装方法基本の「トップに戻る」ボタンまずは、基本の「トップに戻る」ボタンです。
See the Pen トップに戻る | 基本形 by TakahiroOkada (@okalog) on CodePen. それでは、処理を追ってみます。 jQueryを使うときにとりあえず書いているこれは、全てのDOM要素を読みこんだ後に読み込まれる関数です。
scrollHeightという変数には、どれだけ下にスクロールしたらボタンを表示するかを決める値を設定します。
ここではトップに戻るボタンを押したら、トップに戻る制御をしています。 第1引数にpropertiesで変化させたいCSSを書くみたいですね。CSS以外にも 第2引数にはdurationがきており、どれだけの時間を変えて変化させるかを指定できます。 単位はミリ秒なので800ミリ秒 = 0.8秒 となります。 参考記事 フッターで非表示なる「トップに戻る」ボタン
See the Pen トップに戻る | フッターで非表示にする by TakahiroOkada (@okalog) on CodePen. 追加した箇所の説明です。
そして、ページ全体の高さ – ウィンドウの高さ の差分を あとは、if文で この辺り僕も適当にやっていたのですが、検証画面でどんな値が取れるかをみると、理解が深まるかと思います。 まとめ多くのWEBサイトに「トップに戻るボタン」があるので、一度仕組みを理解しておくと応用が効くようになると思います。 そんな思いで、今回僕もコピペエンジニアから脱出するべく理解しようと頑張ってみました! 最初はコピペで実装していきながら、少しずつ理解していけるよに一緒に頑張っていきましょー。
HTMLのトップへ戻るリンクは?HTMLタグについて
<a href="header">ページ上に戻る</a> です。 もし、サービス情報ページのコンテンツの途中や、見出しタイトル(h2タグ)あたりに表示したい場合は、<a href="service.html#mark1"> ページ上に戻る</a> という形になります。
スクロールしてもついてくるボタンの名前は?フローティングボタンとは、ページの先頭へ戻るボタンやお問い合わせボタンなど、画面の右下などに表示され、スクロールしてもその位置で追従してくるボタンのことを言います。
|