フリーランスが会社員収入を継続して得られないパターン7つ

ページトップボタンの作成方法。スクロールしないとあらわれないようにする【コピペ3分】

バンコクのエンジニア講座であるisara3期の課題でみんながつまづいた、ページトップボタン(トップページへ戻るボタン)の作成方法を紹介します。

1.作りたいもの

ページトップボタン

実装したい機能

  • ボタンを押すとトップページへ戻る。fontawesomeを使って矢印を実装したい。
  • 画面を1000pxスクロールしないとボタンがあらわれないようにする

2.ページトップボタン(トップページへ戻るボタン)の作成方法

以下のコードのコピペで上のボタンと全く同じものができます!

ページトップボタンのid=”mmm”はpageTopという名前で実装されていることが多いですが、bootstrapを導入している時は動作しない可能性がある(pageTopという名前をbootstrapも使って機能が実装されている?)ので、名前を変えています。

HTML

<i class=”fas fa-chevron-up”></i>の 部分でfont-awesomeの上矢印を使っています。

CSS

#mmmのrightやbottomで画面のどの位置で表示させるか決定しましょう。

jQuery

「画面を1000pxスクロールしたら・・・」のところで、一定以上スクロールしないとあらわれないようにしています。

フリーランスがwordpressで最低限稼げるレベルになるには?