JS 实现返回顶部的效果——百分百可以！！！

JS 实现单击返回顶部的效果

小伙伴们平常去浏览网页可能都发现，滚动到一定程度都会出现返回顶部的按钮，方便用户来一键返回，从而来提高用户的体验感。今天我们来讲下如何实现。

实现步骤

  我这里列出了两种方法，第一种是使用 Timeout() 方法实现，模拟动画形式返回顶部，也是体验感最好的一种，但缺点就会损耗一些性能。
  第二种是瞬间返回顶部的，绑定事件，设置滚动条的位置像素, 单击一下马上到达顶部，速度很快，缺点就是体验感有点差，因为没有返回的过程，是瞬间到达顶部的。

		<div id="cbtn">
			<a href="" id="returnTop" onClick="returnTop();return false;" >返回顶部</a> 
		</div>
	    <div class="aa">
			你好啊！
		</div>
		<div class="aa">
			你好啊！
		</div>
		<div class="aa">
			你好啊！
		</div>
		<div class="aa">
			你好啊！
		</div>
		<div class="aa">
			你好啊！
		</div>
		<div class="aa">
			你好啊！
		</div>

window.onload = function(){
	// 监听滚动条滚动事件
	window.addEventListener('scroll', function(e) {
		hiddenBtn();
	});
}

// 返回顶部隐藏显示方法
function hiddenBtn() {
	// 获取按钮位置
	var rtb = document.getElementById('returnTop');
	// 获取当前滚动条所在的位置，如果大于 700 则把隐藏的按钮显示，否则隐藏
	if (document.documentElement.scrollTop > 700 || document.body.scrollTop > 700) {
		rtb.style.display = "block";
	} else {
		rtb.style.display = "none";
	}
}

// 返回顶部方法
function returnTop() {
	// 减少滚动条 Y 轴的距离，每次减少 85
	window.scrollBy(0, -85);
	rt = setTimeout('returnTop()', 10);
	// 每次减少后获取当前滚动条的位置
	var topPX = document.documentElement.scrollTop + document.body.scrollTop
	// 如果 滚动条位置等于 0 后，则把方法停止，否则继续调用自己执行。
	if (topPX === 0) {
		clearTimeout(rt);
	}
}
		
		
/*
*	瞬间返回顶部，没有动画效果
*/
// 给返回按钮绑定单击事件
function topFunction() {
	document.documentElement.scrollTop = 0;
	document.body.scrollTop = 0;
}

.aa{
	height: 400px;
	text-align: center;
}
#cbtn{
	
	position: fixed;
	margin: 37.5rem 6rem 3.125rem 83.125rem;
}
#cbtn a{
	display: none;
}

具体的作用，我也在代码中打上注释，实现原理很简单，希望能帮助到你。