javascript 设置返回顶部的效果

O_oregou

已于 2024-07-07 08:40:31 修改

阅读量1.1k

点赞数 1

文章标签： javascript 前端 css

于 2023-01-11 14:59:16 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/128644981

版权

动态效果要求：

点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方

实现原理：

设置对返回顶部按钮的单机响应函数

在此函数内部定一个返回顶部计时器 returnTop

在 returnTop 内部设置一个变量 top 储存滚动条距离顶部的位置

在 returnTop 内部设置一个变量 v 储存一个数值，该数值为 -top/5

再令 document.documentElement.scrollTop 的数值为 （ top + v ）

然后对 returnTop 定时器的执行间隔为30ms

如此每经过30ms，document.documentElement.scrollTop 的数值就会发生改变

此改变的值与 top 相关，top越大v越大，top越小v越小，从而达到实现点击按钮之后可以由快到慢地回到顶部

在 document.documentElement.scrollTop == 0 的时候设置清除计时器

代码展示：

<!DOCTYPE html>
<html lang="zh-CN">
<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>demo1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            width: auto;
            height: 3000px;
            background-image: linear-gradient(rgb(201, 200, 200),rgb(57, 56, 56));
            text-align: center;

            position: relative;
        }

        #btn{
            width: 65px;
            height: 65px;
            text-align: center;
            line-height: 65px;
            color: white;
            border: 1px solid black;
            background-color: gray;
            cursor: pointer;

            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <h1>TOP</h1>
    <button id="btn">返回顶部</button>

    <script>
        window.onload = function(){
            //获取按钮
            var btn = document.getElementById("btn")
            //设置按钮点击后返回顶部
            btn.onclick  = function(){
                //设置计时器
                var returnTop = setInterval(function(){
                    //设置返回顶部距离
                    var top = document.documentElement.scrollTop
                    //设置速度差距
                    var v = Math.floor(-top/5)
                    document.documentElement.scrollTop = top + v
                    //清除计时器
                    if(top == 0){
                        clearInterval(returnTop)
                    }
                },30)
            }
            //调用是否隐藏按钮函数
            topGap()
            //设置当页面滚轮发生滚动时候的响应事件
            document.onscroll = function(){
                //调用是否隐藏按钮函数
                topGap()
            }
        }
        //设置是否隐藏按钮函数，判断scrollTop的数值，如果为零隐藏返回顶部按钮
        function topGap(){
            if(document.documentElement.scrollTop == 0){
                btn.style.display = "none"
            }else{
                btn.style.display = "block"
            }
        }
    </script>
</body>
</html>