jQuery實現點選回到頂部
阿新 • • 發佈:2019-01-06
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) })