SHIDEN DESIGN BLOG

thumnail_20170130

上スクロールで現れるページトップへ戻るボタン

SponsorLink

ページの先頭へ戻るボタンの配置について

 
ページの先頭に戻るボタンをposition:fixd;で配置すると、特にスマートフォンでメディアサイトなどを見ている場合、邪魔ですよね?
かと言って、記事の最後やフッターに配置されていると、そこまで読まなかった時に不便を感じたり。
 
なので、ページの先頭に戻りたい時のみ姿を表してくれたらいいなと思い、上スクロールで現れるページトップへ戻るボタンを実装したいと思います。
 
先ずはposition:fixd;でボタンを配置しdisplay: none;で非表示にしておきます。
ボタンのデザインや位置は、好みで調節してください。
 
実装にはjQueryを使用しますので予め読み込んでおいてください。

HTML

CSS

jQuery

これで上スクロールした際#topをfadeInさせ、下スクロールで再び#topを非表示にする事ができます。
実際の動作はサンプルをご覧ください。
 

 
サンプルでは、ネット上でよく見かける「スムーズスクロール」のコードをそのまま追加しています。

SponsorLink

Related Articles