ページトップへ戻るボタン（超簡単編）

業務外

井戸掘りブログは井戸掘りを始めると記事が長いです。記事を読むにもスクロールが大変。そこでページトップへ戻るボタンを配置しました。

参考にした記事は「簡単編」としてアンカータグと画像のボタンを組み合わせた方法です。確かに簡単なのですが、画像を準備するのがちょっと面倒臭い。
本記事では「超簡単編」として、HTMLとCSSだけでボタンを作成しました。

以下の2行のソースをHTML/JavaScriptガジェットに記述するだけで、ページトップへ戻るボタンを配置できます。

おソースです。

<a rel="nofollow" style="display:scroll;position:fixed;bottom:30px;right:5px;color:white;background-color:rgba(30,144,255,0.75);border-radius: 4px;width: 40px;text-align: center;text-decoration: none;padding: 0 0 10px;font-size:x-large;" href="#" title="トップへ戻る">
<b>︿</b></a>

感想と構想

ページトップへ戻るボタンは、以下の記事を参考にさせていただきました。

ページトップへ戻るボタン。ブログに設置する方法（簡単編）
https://kinncya-heta-yoko.blogspot.com/2017/09/page-top-button.html