【jQuery】ふわっと出てくる「上へ戻るボタン」の作り方

 2019年9月23日
CODE
この記事のURLとタイトルをコピーする
最近のサイトでは「上に戻る」や「トップに戻る」などのボタンを見かけることが多くあります。
ボタンをクリックすると同ページの一番上へスーっとスクロールし戻る仕様で、特にブログ記事やLPなどの長いページで置かれています。

当ブロブだと、この部分です。
jQuery初心者の方でもコピペで簡単に実装しやすいので、確認していきましょう。

jQueryの準備をする

jQueryを動かすための準備をします。
サイト内で読み込ませるファイルは「jQuery本体」と「jsファイル」です。

この2種ファイルを、bodyの閉じタグの前に追加します。
詳しく確認していきましょう。

jQueryを読み込む

まず、jQueryを動かすための本体を読み込ませます。

以下のコードを追加します。

スクリプトの読み込み

ボタンの動きの部分です。
実際はjsファイルにjQueryを記述するため、そのファイルを読み込ませる必要があります。

今回は「script.js」という別ファイルを用意しました。
「script.js」をscriptタグで読み込みましょう。

以下のコードを追加します。
「script.js」までのパスは、ファイル構造に合わせて書きかえてください。
scriptタグの読み込む場所について
scriptの読み込む場所に、原則決まりはありません。
当サイトでは、全てbodyの閉じタグに記述するように統一しています。
ブラウザがサイトを表示する時に上から順に読み込むため、scriptが最初の方にあると他の読み込みが全て停止してしまうからです。

ボタンの設置

次にボタン本体の設定をします。
今回はボタンを画面右下に固定して表示させます。

HTML

以下のコードを、bodyタグ内に追加します。
当サイトではfooter前に置いていますが、任意の好きな場所に追加してください。

CSS

以下のスタイルを追加します。
ボタンの表示場所、色や形などは好きに変更してください。

jQuery

以下のコードを、script.jsに追加します。
ボタンの動きの設定です。
戻るときの速度は、4行目のspeedの値を変更して下さい。

編集後全てのファイルをアップロードし、サイトで確認をしましょう。

まとめ

今回はテキストでボタンを作りましたが、実際はFont Awesomeというフォントアイコンを使用しています。
他にもSVGや画像を使用しているサイトもありますので、是非オリジナルのボタンを作成してみましょう。
この記事のURLとタイトルをコピーする


share