TOPへ戻るボタンをJavascriptとCSSで追加する

TOP までスクロールする操作はめんどくさく、ユーザーエクスペリエンスの低下に繋がるかもしれないので、CSS と JavaScript を使って TOP に戻るボタンを追加しました。

スポンサーリンク

HTML

これを </body> の直前辺りに追加します。

CSS

背景色は少し透過させてみました。

スマホ上だとボタンが大きすぎて不自然な気がするので、条件分岐でスマホ専用の CSS も書きます。

JavaScript

参考サイトを基にほぼコピー。表示するタイミングは調整するといいです。

WordPress上で動かないときの対策

実はこのまま書いても WordPress だと動きません。

他のライブラリとの衝突を避けるため、$ が使えないらしいです。

$ を jQuery に置き換えることで対応します。

参考サイト →

スポンサーリンク

コメント・質問する