「トップへ戻るボタン」にページのスクロール量を可視化カスタマイズ

もはやデフォルトの存在の「トップへ戻る」ボタン。
凝ったデザインや素材を使うのは「面倒だなぁ」と思い、ずっと後回しにしておりました。
そんな時、良い「トップへ戻る」ボタンを見つけました。

良い「トップへ戻るボタン」を見つける

当ブログでも使ってるWPテーマ「Cocoon」でもデフォルトで「トップへ戻る」ボタンがあり、そちらを使っていたのですが、どっかのタイミングでカスタマイズしたいなと思ってました。

そんな時に見つけたのが、ページ全体のどこまでスクロールしたか可視化させた「トップに戻る」ボタン。

上記のような、サークル状で現在のページのスクロール量・残量がわかります。

よく、サイトの上部にページのスクロール量に合わせて動くバーを設置されているサイトを見かけますが、それを「トップへ戻る」ボタンに追加したボタンです。

ただページの上部に戻るだけではなく、スクロール量に合わせて動きも増えるのが面白いです。

以下がその「トップへ戻る」ボタンの紹介・解説ページ。
ありがたやです！

どのくらいページを読み進んだかがわかるトップへ戻るボタン | M DESIGN 神奈川県横浜市のフリーランスWEBデザイナー

CODEPENを漁っていたら面白いものを見つけました。動作的にはページのトップへスクロールしながら戻るボタンなのですが、そのページをどのくらい読み進めたかがわかるようになっています。サイトやページにちょっとしたアクセントを付けたいときに良いのではないでしょうか。あくまでトップへ戻るボタンなので、デザインの邪魔にもなりに...

mdesign-y.com

で、元のCODEPENのソースコードが下記です。

See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.

早速、「トップへ戻るボタン」実装

実装方法は、上記のページかCODEPENをご覧いただければと思います。
難易度的には、そんなに難しくはないと思います。

当ブログでは、色とアイコンフォントの変更の為CSSと、線の太さの調整の為SVG箇所をイジイジしました。

Cocoonの場合

WPテーマ「Cocoon」に実装する場合は、以下のファイルにコードを書けば動くはず。
※僕は下記に書きました。あくまでも任意の場所でよろしくです。

個人的にHTMLをmain-before.phpに書くとメインのコンテンツより前にソースが入るのが、あんまり許せないです。笑
表示上、CSSで固定配置させるので問題はないのですが、ソースの順番的に「トップへ戻る」ボタンは下部に入れたかったです。

「トップへ戻るボタン」にページの残量を可視化まとめ

ページ全体のスクロール量なんて別に見れなくてって思ってましたが、スマホ表示の際にあっても良いかなって思いました。

SVGを上手く使えば、デザインや形が増え、いろいろ応用できそうで面白そうです。