ページの上に戻るボタンを追加するJS

目的

muragonのカスタマイズ。
画面下にページの上に戻るボタンを追加する。
下に一定量スクロールした時、ボタン表示する。ボタンクリックでページ上に滑らかに移動する。

Javascript

$(function() {
var topBtn = $('#backTop');
topBtn.hide();

/* スクロールが一定量に達したらボタン表示 */
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});

/* スクロールしてトップ */
topBtn.click(function() {
$("body,html").animate({
scrollTop: 0
}, 500);
return false;
});
});

CSS

本コードはFontawesomeを使用。

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

/* 位置 */
#backTop {
display : none;
position : fixed;
right : 50px;
bottom : 25px;
z-index : 100;
}

/* ボタン位置 */
#backTop a {
display : block;
width : 50px;
height : 50px;
border-radius : 50%;
background : #81d6fc;
text-align : center;
color : #fff;
}

/* ボタン文字 */
#backTop a:before {
content : "\f077";
font-family : Fontawesome;
display : block;
margin : 0 auto;
line-height : 50px;
font-size : 20px;
}

/* hoverアニメーション */
#backTop:hover a:before {
animation-name : hvr-icon-up;
animation-duration : 0.75s;
animation-timing-function : ease-out;
}

@keyframes hvr-icon-up {
0%, 50%, 100% {transform : translateY(0);}
25%, 75% {transform : translateY(-10px);}
}

HTML

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