ページトップへ戻るボタンを設置する方法【コピペで可能】

スクロールしながら戻る、「上に戻るボタン」を設置する方法をお伝えします。

この「上に戻るボタン」は、当サイトでも、実際に設置しています。

具体的には、当サイトの右下に、丸い灰色のボタン（マウスを重ねるとオレンジ色になるボタン）がありますよね？これが、スクロールしながら戻る、上に戻るボタンです。

ためしに、右下の丸いボタンをクリックしてみてください。
スクロールしながら、上に戻りますよ。

この「上に戻るボタン」は、情報量が多いページの場合は、設置した方が良いと思っています。訪問者の手間を省くことができるので、やっぱり便利だと思います。

私も実際にやってみて、設置することによるデメリットは特にないので、良かったら試してみてくださいね。

■ ページトップへ戻るボタンを設置する方法の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：全ページのヘッダー（</head>の真上）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。

上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。

そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。

ソースを入れる場所については、十分、注意してください。
（ヘッダーの中に入れないと、動かないです）

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、サイドバーのHTMLファイル（side.htmlファイル）だけには、上記のソースを入れる必要はありません。

手順３：全ページの一番下（</body>の真上）に、下記のソースを入れる。

上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。

そして、ソースを入れる場所は、HTMLファイルの一番下（</body>の真上）に入れます。

HTMLファイルの下の方であれば、どこに入れても良いのですが、</body>の真上に入れるのが、一番良いと思います。

【注意】

手順４：「上に戻るボタン」をクリックして、上に戻ることを確認する。

CSSファイル（style.css）にソースを追加して、全部のHTMLファイルのヘッダー（</head>の真上）と一番下（</body>の真上）に、それぞれソースを入れたら、ホームページの右下に、「上に戻るボタン」が表示されるはずです。

ただ、この「上に戻るボタン」は、ホームページを少し下げないと表示されないので、ご認識くださいね。（つまり、ホームページが表示されたときには、「上に戻るボタン」は表示されないということです）

「上に戻るボタン」をクリックして、一番上にスクロールしながら戻れば、作業完了です。

■ ボタンのデザインを変える方法

CSSファイル（style.css）に入れた記述は、「上に戻るボタンのデザイン」を指定しています。

そのため、そのため、この記述を変更すれば、「上に戻るボタン」の色を変えたり、形を変えたりすることができるのですが、、、このまま使うのが無難かもしれませんね。

もし興味があれば、色などを変更してみてください。

■ 「上に戻るボタン」が表示されるまでの距離を変更する方法

全ページのヘッダー（</head>の真上）に入れた記述では、「var offset = 100;」が、「上に戻るボタン」が表示されるまでの距離を指定しています。

たとえば、「var offset = 300;」などに変更すれば、ある程度、ホームページを下に移動していかないと、「上に戻るボタン」は表示されない、、、ということですね。

これについても、数字を変更することはできますけど、「var offset = 100;」で良いんじゃないかなと思います。

■ 上に戻るまでの速さを変更する方法

「var duration = 500;」は、上に戻るまでの速さを指定しています。

たとえば、「var duration = 200;」などに変更すれば、かなりのスピードで、上に戻りますよ。

この辺りの記述を、自由に変更することができるので、良かったら試してみてくださいね。（ただ、このページでお伝えしている記述内容を、そのまま使うのが良いのかなと思いますよ！）

■ やり方が分からない場合は？

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。

【すぐに解決する】
・ホームページのトラブルと悩みを解決！あなたの仕事をお手伝いします

「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。

このページのトップ↑

【よく読まれている関連記事】