2021.3.1
javascript

【js】トップにふわっと戻るページトップボタンの実装

  • WEB
  • テクニック
【js】トップにふわっと戻るページトップボタンの実装

やりたいこと

  • 押したらページ内をするするっと登っていくページトップボタンの実装

手順

サンプルは右のコンテンツエリアをスクロールするとご覧いただけます。

以下のコードをコピペでOKです。お好みでcssを整えてください◎

jQueryの読み込みもお忘れなく。

See the Pen
VwmXBve
by nanami (@nanami_po)
on CodePen.


ボタンのフェードイン、フェードアウトのタイミングは

if ($(this).scrollTop() > 100) {

 

この部分の数値で調整できます。

今回の記述例では、100px以上スクロールしたらフェードインして、スクロールが100px以下になったらフェードアウトする、という記述になっています。

 

上に戻るまでの速度は

{
scrollTop: 0,
},
500

500ミリのスピードで、0pxの位置に戻る仕組みです。

早くしたり遅くしたりしたい場合は500の部分を調整してください。

 

実装は以上で完了です!

お疲れ様でした。良かったら参考にしてください。

Share Please

Read this too