【コピペOK!】ページトップボタンを簡単に実装する方法

javascript

【コピペOK!】ページトップボタンを簡単に実装する方法

2019年09月19日 8:00 

【コピペOK!】ページトップボタンを簡単に実装する方法

おはようございます!社員Aです👩

今回はWEBサイトでよく見る「topへ戻る」ボタンの実装方法をご紹介します。

コピペで実装できるので、ぜひ!

 



 

ふわっと表示されるページトップへ戻るボタン

ページTOPへ戻るボタンのはこんな感じです。

最上部まで戻るとふわっと消えて、スクロールしていくうちにふわっと現れます。

ぜひ、この記事内でスクロールしてみてください!

 



ページトップボタン実装方法【丸バージョン】

このサイトでも使っているデフォルトのページトップボタンの実装方法です。

CSSなどをカスタマイズして、お好きなように変更してみてください!

 

HTML

※矢印部分はfont awesomeを使って表示をしているので、予め読み込んでおく必要があります。

font awesomeの導入についてはこちらから!

CSS
 

js
 

 

ページトップボタン実装方法【スクエアバージョン】

先ほどとHTML・js部分は同様で、CSSのみ下記のように記述すると、スクエアタイプのページトップボタンが実装できます。

CSS
 

 

まとめ

手軽に実装できるページトップボタン2種類をご紹介しました。

ページが長くなると、ページトップまで戻るのが大変になるので、このボタンを実装するだけでユーザビリティアップに繋がりますね。

背景色や大きさもCSSでカスタマイズすれば、オリジナル感も出せるかと思います。

是非試してみてください。

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!