1. 程式人生 > >jQuery實現點選回到頂部

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)
})