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

2019-03-10cssアイコンフォント

 

 

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

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

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

 

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

 

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

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

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

 

HTMLを記述する(共通)

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

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

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

 

アイコンフォントを使う

 

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

 

パターン1

/*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;
}

パターン2

#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;
}

パターン3

#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”>

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

 

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

 パターン1

#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;
}

パターン2

#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;
}

 

色を変える

カラーコードは以下もご利用下さい。

色名