<div>SCROLL↓</div>
<div></div>

<a href="#" class="pagetop"></a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

* {
	box-sizing: border-box;
	word-break: break-all;
}
body {
	margin: 0;
	padding: 0;
}
div {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pagetop {
	display: none;
	position: fixed;
	right: 5%;
	bottom: 5vh;
	z-index: 100;
}
.pagetop::before {
	content: "";
	width: 20px;
	height: 20px;
	border-left: 3px solid #333;
	border-top: 3px solid #333;
	display: inline-block;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

$(document).ready(function() {
	var pagetop = $('.pagetop');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
			}
		});
		pagetop.click(function () {
			$('body, html').animate({ scrollTop: 0 }, 500);
			return false;
	});
});