当前位置：首页 > article >正文

html 实现返回顶部动画

article 2024/12/25 13:55:57

返回顶部动画

效果图

点击顶部按钮，回到顶部动画效果
在这里插入图片描述

实现

使用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.pageYOffset
        let 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>