HTML
<!-- ページトップへ戻るボタン -->
<p class="pagetop" style="display: block;">
<a href="#">
<i class="fas fa-chevron-up"></i>
</a>
</p>
※矢印部分はfont awesomeを使って表示をしているので、予め読み込んでおく必要があります。
font awesomeの導入については下記を参考にしてください。
CSS
/* ページTOPに戻る */
.pagetop{
display: none;
position: fixed;
right: 15px;
bottom: 60px;
}
.pagetop a{
display: block;
font-size: 0;
width: 50px;
height: 50px;
text-align: center;
background: #7db4e6;
border-radius: 50%;
line-height: 50px;
}
.pagetop a i{
font-size: 20px;
color:#fff;
line-height: 50px;
}
js
$(window).scroll(function () {
var now = $(window).scrollTop();
if (now > 200) {
$('.pagetop').fadeIn("slow");
} else {
$('.pagetop').fadeOut('slow');
}
});
背景色や大きさもCSSでカスタマイズすれば、オリジナル感も出せるかと思います。簡単ですので、ぜひ試してみてください。
CSS
スクエア型にしてみます。
/* ページTOPに戻る */
.pagetop{
display: none;
position: fixed;
right: 15px;
bottom: 60px;
}
.pagetop a{
display: block;
font-size: 0;
width: 50px;
height: 50px;
text-align: center;
background: #7db4e6;
line-height: 50px;
}
.pagetop a i{
font-size: 20px;
color:#fff;
line-height: 50px;
}