返回顶部动画
效果图
点击顶部按钮，回到顶部动画效果
实现
使用window.scroll()实现滚动，
window.scroll(x,y),其中x代表着X轴滚动多少像素，y代表着Y轴滚动多少像素。
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;}.box{height: 300px;width: 100%;background-color: rgb(74, 113, 147);margin-bottom: 20px;}#back-btn{position: fixed;bottom: 20px;right: 20px;background-color: aliceblue;border-radius: 20px;padding: 10px;}</style>
</head>
<body><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div id="back-btn">返回顶部</div><script>// 返回顶部按钮事件let backBtn = document.getElementById('back-btn')backBtn.addEventListener('click',()=>{scrollAnimate()})let isScolling = false//滚动中let scrollTime = 100//间隔多久滚动一次// 变速滚动function scrollAnimate(callBack){// 防止反复点击按钮if(isScolling){return}// 获取滚动次数let scrollY = window.pageYOffsetlet step = Math.floor(scrollY/10)timer = setInterval(() => {scrollY = window.pageYOffset// 获取当前滚动的值if(scrollY<10){// 结束滚动window.scroll(0,0)// 清除定时器timer&& clearInterval(timer)timer = null//调用回调函数callBack&&callBack()}else{window.scroll(0,scrollY-step)step = step + 30}}, scrollTime);}</script>
</body>
</html>
