もはやデフォルトの存在の「トップへ戻る」ボタン。
凝ったデザインや素材を使うのは「面倒だなぁ」と思い、ずっと後回しにしておりました。
そんな時、良い「トップへ戻る」ボタンを見つけました。
良い「トップへ戻るボタン」を見つける
当ブログでも使ってるWPテーマ「Cocoon」でもデフォルトで「トップへ戻る」ボタンがあり、そちらを使っていたのですが、どっかのタイミングでカスタマイズしたいなと思ってました。
そんな時に見つけたのが、ページ全体のどこまでスクロールしたか可視化させた「トップに戻る」ボタン。

上記のような、サークル状で現在のページのスクロール量・残量がわかります。
よく、サイトの上部にページのスクロール量に合わせて動くバーを設置されているサイトを見かけますが、それを「トップへ戻る」ボタンに追加したボタンです。
ただページの上部に戻るだけではなく、スクロール量に合わせて動きも増えるのが面白いです。
以下がその「トップへ戻る」ボタンの紹介・解説ページ。
ありがたやです!

で、元のCODEPENのソースコードが下記です。
See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.
早速、「トップへ戻るボタン」実装
実装方法は、上記のページかCODEPENをご覧いただければと思います。
難易度的には、そんなに難しくはないと思います。
当ブログでは、色とアイコンフォントの変更の為CSSと、線の太さの調整の為SVG箇所をイジイジしました。
Cocoonの場合
WPテーマ「Cocoon」に実装する場合は、以下のファイルにコードを書けば動くはず。
※僕は下記に書きました。あくまでも任意の場所でよろしくです。
言語 | 保存場所(子テーマ:cocoon-child) |
---|---|
HTML | tmp-user/main-before.php |
CSS | style.css |
Javascript | tmp-user/footer-insert.php |
個人的にHTMLをmain-before.phpに書くとメインのコンテンツより前にソースが入るのが、あんまり許せないです。笑
表示上、CSSで固定配置させるので問題はないのですが、ソースの順番的に「トップへ戻る」ボタンは下部に入れたかったです。
「トップへ戻るボタン」にページの残量を可視化まとめ
ページ全体のスクロール量なんて別に見れなくてって思ってましたが、スマホ表示の際にあっても良いかなって思いました。
SVGを上手く使えば、デザインや形が増え、いろいろ応用できそうで面白そうです。
コメント