スクロールすると見え隠れする”トップに戻るボタン”を実装
[CSS]
/*---------------------------------
トップに戻るボタン
-----------------------------------*/
#toTop{
position:fixed;
right:15px;
bottom:15px;
font-size:14px;
background-image:linear-gradient(#0765b1, #06599b);
background-color:#0765b1;
border-radius:5px;
box-shadow:0 0 4px 0 rgba(0,0,0,0.2);
color:#ffffff;
padding:10px 15px 10px 25px;
text-decoration:none;
display:none;
}
#toTop::before{
content:'';
position:absolute;
top:50%;
left:8px;
-webkit-transform:translateY(-50%);
transform: translateY(-50%);
border:6px solid transparent;
border-bottom:12px solid #ffffff;
border-top:0;
}
#toTop.show{
display:block;
}
プロフィール