スクロールすると表示されるトップに戻るボタンを作成しました。
anime.jsを使ってスムーズスクロールも実装しています。必須ではないので、不要でしたらボタンのクリックイベントを削除してもらえればOKです。
※ソース上ではanime.jsの読み込み部分は省略しています。

See the Pen トップに戻るボタンとスムーズスクロール by jun (@zionboogie) on CodePen.

レスポンシブにも対応しているのでよければ使ってください。

HTML

<a href="#top" id="btn-backtotop"><span class="arrow arrow_up"></span></a>

CSS

/* ========================================================
矢印アイコン
=========================================================*/
.arrow {
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	&::after,
	&::before {
		position: absolute;
		content: "";
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		vertical-align: middle;
	}
}
// 上矢印
.arrow_down::before,
.arrow_up::before {
	top: auto;
	left: auto;
	bottom: 8px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(-45deg);
}


/* ========================================================
ページトップに戻るボタン
=========================================================*/
#btn-backtotop{
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 1000;
	transition: all 1s ease-out;
	transition: bottom 0.2s ease-out;
	opacity: 0;
	@media screen and (max-width:767px){
		bottom: 10px;
		right: 5px;
	}
	// スクロール時にJSから付与されるクラス
	&.fadein{
		opacity: 1;
	}
	// ホバー時の挙動
	&:hover{
		opacity: .8;
		bottom: 34px;
		@media screen and (max-width:767px){
			bottom: 10px;
		}
		&::after{
			box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
			@media screen and (max-width:767px){
				box-shadow: none;
			}
		}
	}
	// ボタンのベース
	&::after{
		content: "";
		display: block;
		color: #fff;
		text-align: center;
		width: 80px;
		height: 80px;
		padding: 4px;
		border-radius: 8px;
		background-color: #000;
		transition: all .3s;
		transform: scale(0.8) rotate(45deg);
		transition: background-color 0.5s ease-out;
		@media screen and (max-width:767px){
			width: 40px;
			height: 40px;
		}
	}
	// 矢印マーク
	.arrow{
		top: 72px;
		left: 13px;
		@media screen and (max-width:767px){
			top: 46px;
			left: -1px;
		}
		&::before{
			width: 20px;
			height: 20px;
			z-index: 1;
			@media screen and (max-width:767px){
				width: 10px;
				height: 10px;
			}
		}
	}
}

JavaScript

// anime.js利用

/* ========================================================
スクロールでトップに戻るボタンを表示
=========================================================*/
// スクロールして何ピクセルでアニメーションさせるか
var px_change = 1;
// スクロールのイベントハンドラを登録
window.addEventListener('scroll', function(e) {
	// 変化するポイントまでスクロールしたらクラスを追加
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	if ( scrollTop > px_change ) {
		document.getElementById( "btn-backtotop" ).classList.add( "fadein" );

	// 変化するポイント以前であればクラスを削除
	} else {
		document.getElementById( "btn-backtotop" ).classList.remove( "fadein" );
	}
});

/* ========================================================
トップに戻るボタンのスムーズスクロール
=========================================================*/

document.getElementById( "btn-backtotop" ).addEventListener('click', function(e) {
	anime.remove("html, body");
	anime({
		targets: "html, body",
		scrollTop: 0,
		dulation: 600,
		easing: 'easeOutCubic',
	});
	return false;
});