2021.3.1 ／ 更新日：
2022.9.18
JQuery･PHP 【jQuery】トップにふわっと戻るページトップボタンの実装
やりたいこと
- 押したらページ内をするするっと登っていくページトップボタンの実装
手順
サンプルは右のコンテンツエリアをスクロールするとご覧いただけます。
以下のコードをコピペで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の部分を調整してください。
実装は以上で完了です！
お疲れ様でした。良かったら参考にしてください。
関連記事
