【jQuery】TOPへ戻るボタンの作り方

今回はWEBサイトでよく使われる「TOPへ戻るボタン」の作り方を紹介します!

TOPへ戻るボタンを押すことで、WEBページの一番上までスムーズにスクロールしてくれます。

コピペできるので、是非真似してみてください。

【jQuery】TOPへ戻るボタンの作り方

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

簡単なWEBページの中に「TOPへ戻るボタン」を入れてみました。

下にスクロールしていくと、右下にボタンが表示されます。

ボタンをクリックすると、TOPまで自動でスクロールしてくれます。

HTML

topのクラスを持った親要素の中に、aタグを用意しました。

CSS

◎3行目〜8行目

「position: fixed;」でボタンを固定にし、「right: 20px;」と「bottom: 10px;」で右下に配置しました。

そして「display: none;」で通常は表示されないようにします。

◎9行目〜15行目

aタグを「display: inline-block;」でインラインブロック要素にし、幅と色を指定していきます。

◎16行目〜18行目

aタグをhoverした際に少しボタンの色を薄くしたいので、「opacity: 0.8;」を指定します。

JavaScript

まずはbodyの閉じタグの上に以下のjQueryのコードを記述します。

そしてJavaScriptのコードはこちら。

100の数字は、何pxスクロールしたら「TOPへ戻るボタン」が表示されるのか決めることができます。

今回は100pxスクロールすると、ボタンが表示されるようにしました。

次に500の数字は、何秒かけてTOPまでスクロールするのか時間を決めることができます。

上記の2つの数値は、ご自由に変えてみてください!

まとめ

以上が、「TOPへ戻るボタン」の作り方でした。

WEBサイトでよく使われるので、是非理解しておきましょう!

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事