手順1:CSSファイル(style.css)に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル(style.css)の一番下に入れるようにしましょう。
(一番下に、上記のソースを追加するのが、分かりやすいと思います)
手順2:全ページのヘッダー(</head>の真上)に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
|
上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
(ヘッダーの中に入れないと、動かないです)
【注意】
「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、
サイドバーのHTMLファイル(side.htmlファイル)だけには、上記のソースを入れる必要はありません。
手順3:全ページの一番下(</body>の真上)に、下記のソースを入れる。
<div class="pagetop">↑</div>
|
上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。
そして、ソースを入れる場所は、HTMLファイルの一番下(</body>の真上)に入れます。
HTMLファイルの下の方であれば、どこに入れても良いのですが、</body>の真上に入れるのが、一番良いと思います。
【注意】
「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、
サイドバーのHTMLファイル(side.htmlファイル)だけには、上記のソースを入れる必要はありません。
手順4:「上に戻るボタン」をクリックして、上に戻ることを確認する。
CSSファイル(style.css)にソースを追加して、全部のHTMLファイルのヘッダー(</head>の真上)と一番下(</body>の真上)に、それぞれソースを入れたら、ホームページの右下に、「上に戻るボタン」が表示されるはずです。
ただ、この「上に戻るボタン」は、ホームページを少し下げないと表示されないので、ご認識くださいね。(つまり、ホームページが表示されたときには、「上に戻るボタン」は表示されないということです)
「上に戻るボタン」をクリックして、一番上にスクロールしながら戻れば、作業完了です。
CSSファイル(style.css)に入れた記述は、「上に戻るボタンのデザイン」を指定しています。
そのため、そのため、この記述を変更すれば、「上に戻るボタン」の色を変えたり、形を変えたりすることができるのですが、、、このまま使うのが無難かもしれませんね。
そして、全ページのヘッダー(</head>の真上)に入れた記述では、「var offset = 100;」が、「上に戻るボタン」が表示されるまでの距離を指定しています。
たとえば、「var offset = 300;」などに変更すれば、ある程度、ホームページを下に移動していかないと、「上に戻るボタン」は表示されない、、、ということですね。
また、「var duration = 500;」は、上に戻るまでの速さを指定しています。
たとえば、「var duration = 200;」などに変更すれば、かなりのスピードで、上に戻りますよ。
この辺りの記述を、自由に変更することができるので、良かったら試してみてくださいね。
(ただ、このページでお伝えしている記述内容を、そのまま使うのが良いのかなと思いますよ!)