ページトップへ戻るボタンを簡単コピペ！５パターン

ページのトップへ戻るボタンをHTML１行と、簡単なCSSで実装します。

今回は、以下の５点。サンプルそのまま、コピペで可能です！

また、アイコンや、色、角の丸みなどを自由にカスタマイズしてご利用ください。

　アイコンフォントを使ったバージョン

　アイコンフォントを使わないバージョン

ルクセリタスをお使いの方へ
HTMLを記述する（共通）
アイコンフォントを使う
アイコンフォントを使わない
- パターン１
- パターン２
色を変える

ルクセリタスをお使いの方へ

ルクセリタスには標準でPAGETOPボタン設定機能があります。

設定方法やプチカスタマイズの詳細は以下をご覧ください。

ルクセリタスのPAGETOPボタン設定＆表示位置変更とプチカスタマイズ

ルクセリタスには、PAGETOPボタンが標準装備されています。今回は、サイトのページ、右下に出る「ページのトップへ戻るボタン」の設定方法と表示位置をずらしたい時や横幅いっぱいに表示するなどプチカスタマイズの方法についてです。特徴初期設...

HTMLを記述する（共通）

<body></body>内に以下のコードを記述します。

<div id="page_top"><a href="#"></a></div>

今回の方法は、HTML部分はすべて共通です。

アイコンフォントを使う

Font Awesome　のフリーのアイコンフォントを使ったボタンです。

パターン１

/*PAGE TOPボタン追加*/
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 50px;
background: #003a75; /*ボタンの色*/
opacity: 0.6;
border-radius: 50%; /*角の丸み*/
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: "Font Awesome 5 Free";
content: "f102"; /*アイコン*/
font-weight: 900;
font-size: 25px;
color: #fff; /*アイコンの色*/
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

パターン２

#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: #e68493; /*ボタンの色*/
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: 'f062'; /*アイコン*/
font-size: 25px;
color: #fff; /*アイコンの色*/
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

パターン３

#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: #e25407; /*ボタンの色*/
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: 'f0d8'; /*アイコン*/
font-size: 25px;
color: #fff; /*アイコンの色*/
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

Font AwesomeのCSSリンクを貼る

バージョン5.7.2を使用しています。

FontAwesomeについては、テーマによって既に使用可能になっている可能性もありますので、確認して下さい。V4.7等の古いバージョンを使用している場合は、アイコンフォントを書き換える必要があります。

FontAwesomeを初めて使用する場合は、以下のコードを<head></head>内に貼ります。

<link href=”https://use.fontawesome.com/releases/v5.7.2/css/all.css” rel=”stylesheet”>

アイコンフォントについては以下も参考にして下さい。

Font Awesomeアイコンフォントのサイズ・向き等の変更とコードが消える対処法

当サイトでは　Ver.5以降を使用しており、記事もすべて同様のバージョンでの利用に基づいています。 Ver.4.7を使っておられる方で、アイコンフォントを探したい場合は以下をご覧ください。 Font Awesome Ver.6　について 2...

アイコンフォントを使わない

パターン１

#page_top{
width: 100px;
height: 40px;
position: fixed;
right: 0;
bottom: 10px;
background: #007ab5;
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 100px;
height: 40px;
text-decoration: none;
}

#page_top a::after{
content: '↑ PAGE TOP';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

パターン２

#page_top{
width: 40px;
height: 40px;
position: fixed;
right: 0;
bottom: 10px;
background: #961818;
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}

#page_top a::after{
content: '▲';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}