スクロールしながら戻る、「上に戻るボタン」を設置する方法をお伝えします。
この「上に戻るボタン」は、当サイトでも、実際に設置しています。
具体的には、当サイトの右下に、丸い灰色のボタン(マウスを重ねるとオレンジ色になるボタン)がありますよね?
これが、スクロールしながら戻る、上に戻るボタンです。
ためしに、右下の丸いボタンをクリックしてみてください。
スクロールしながら、上に戻りますよ。
この「上に戻るボタン」は、情報量が多いページの場合は、設置した方が良いと思っています。
訪問者の手間を省くことができるので、やっぱり便利だと思います。
私も実際にやってみて、設置することによるデメリットは特にないので、良かったら試してみてくださいね。
■ ページトップへ戻るボタンを設置する方法の手順
手順1:CSSファイル(style.css)に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル(style.css)の一番下に入れるようにしましょう。
(一番下に、上記のソースを追加するのが、分かりやすいと思います)
手順2:全ページのヘッダー(</head>の真上)に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
|
上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
(ヘッダーの中に入れないと、動かないです)
手順3:全ページの一番下(</body>の真上)に、下記のソースを入れる。
<div class="pagetop">↑</div>
|
上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。
そして、ソースを入れる場所は、HTMLファイルの一番下(</body>の真上)に入れます。
HTMLファイルの下の方であれば、どこに入れても良いのですが、</body>の真上に入れるのが、一番良いと思います。
手順4:「上に戻るボタン」をクリックして、上に戻ることを確認する。
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;」などに変更すれば、かなりのスピードで、上に戻りますよ。
この辺りの記述を、自由に変更することができるので、良かったら試してみてくださいね。
(ただ、このページでお伝えしている記述内容を、そのまま使うのが良いのかなと思いますよ!)
■ やり方が分からない場合は?
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい!」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】