ホームページに戻るボタンを設置

縦長のホームページの場合、戻るボタンが右下に付いてきてくれると非常に助かる。手でスクロールしまくるのはちょっと辛い。ということで、設置できます。

(1)まずは、htmlの内にjavascriptを設置します。

(2)次に、内の一番下の方に、

<p id=”page-top”><a href=”#”>PAGE TOP</a>
※<>は大文字全角をつかっているのでコピペで使用しない様にしてくださいね。

【】内を記述してね

(3)CSSに下記を追加すれば、スクロールが出現するようになる。微調整や、ボタンの変更などは、誰かのページをみれば乗っています。

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}

「ホームページに戻るボタンを設置」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください