jQuery实现点击回到顶部

css

*{margin: 0;padding: 0;}
			a{display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;background: #66aeff;color: #fff;position: fixed;bottom: 10px;right: 10px;}
			ul>li{list-style: none;}
			ul{margin-left:10%;width: 80%;height: 1550px;display: flex;flex-direction: column;justify-content: center;align-items: center;}

html

		<ul>
			<li class="first">第一个</li>
			<li>第二个</li>
			<li class="second">第三个</li>
			<li class="tir">第四个</li>
			<li class="tir"><a>第五个</a></li>
		</ul>
		<a class="goTop" href="javascript:;"></a>

js

//		瞬间回到顶部
//		$(".goTop").click(function(){
//			//scrolltop返回或设置匹配元素的滚动条的垂直位置。
//			$("html,body").scrollTop(0);
//		})
//平滑滚动到顶部
$(".goTop").click(function(){
	//总距离
	var $page = $("html,body")
	var distance = $("html").scrollTop()+$("body").scrollTop()
	//总时间
	var time = 2000
	//间隔时间
    var intervalTime = 50  //其值越小滚动越平滑
	var itemDistance = distance/(time/intervalTime)
	//使用循环定时器不断滚动
	var intervalId = setInterval(function(){
		distance -= itemDistance
	//到达顶部停止定时器
		if(distance<=0){
			distance=0 //修改其值
			clearInterval(intervalId)
	}
		$page.scrollTop(distance)
	},intervalTime)
})