js返回顶部动画效果（基础版）

最新推荐文章于 2023-10-26 17:55:23 发布

南與

最新推荐文章于 2023-10-26 17:55:23 发布

阅读量753

点赞数 1

文章标签：动画 javascript css3

本文链接：https://blog.csdn.net/qq_42354164/article/details/121136721

版权

利用js实现返回顶部的滚轴效果：
主要知识点：scrollTo（scrollX，scrollY）滚轴跳转
周期定时器setInterval（匿名函数，周期毫秒值）

思路：通过点击按钮，执行功能函数（单位时间Y滚轴向上位移指定距离），同时判定，在滚轴位置非零的情况下触发生效，归零后终止定时器。

代码如下：
HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body style="width:5000px;height: 5000px;">
    <h1>顶部</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1>中间板块</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1>底部</h1>
    <button onclick="back_top()">回到顶部</button>
   
</body>
</html>

js部分：

 <script>
        function back_top(){
            let a=scrollY       //
            let timer=setInterval(function(){
            if(a>0){
                // scrollTo(0,0);
                a-=20;
                scrollTo(0,a);
                return;
            }
            // else{
                clearInterval(timer);
            // }
            
        },10)

        }
        
            

    
    </script>

CSS部分：

 <style>
        button{
            width: 80px;
            height: 80px;
            font-size: 24px;
            font-weight: bold;
            background: aqua;
            position: fixed;
            bottom: 25px;
            right:25px;
            color: #333;
            border: none;
            border-radius: 10px;
        }
    </style>

南與

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js返回顶部动画效果（基础版）

利用js实现返回顶部的滚轴效果：主要知识点：scrollTo（scrollX，scrollY）滚轴跳转周期定时器setInterval（匿名函数，周期毫秒值）思路：通过点击按钮，执行功能函数（单位时间Y滚轴向上位移指定距离），同时判定，在滚轴位置非零的情况下触发生效，归零后终止定时器。代码如下：HTML部分：<!DOCTYPE html><html lang=...
复制链接

扫一扫