フリーランスが営業なしで受注する方法5つ

【コピペ3分】ページトップボタンの作成方法。追従して途中からあらわれる設定

ページトップボタン(トップページへ戻るボタン)の作成方法をコピペ3分で出来るように紹介します。追従させて途中から表示させる設定もします。

作りたいページトップボタンと追従して途中からあらわれる設定

ページトップボタン

ページトップボタンで実装したい機能や条件

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

【コピペ3分】ページトップボタンの作成方法。追従して途中からあらわれる設定も

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

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

HTML

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

CSS

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

jQuery

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