第一题小demo-页面返回顶部案例_css返回页面顶部按钮如何消失-CSDN博客

本文链接：https://blog.csdn.net/VanWot/article/details/128697751

小黑子的页面返回顶部案例

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

实现原理：

通过position: fixed使按钮固定，再用display: none让按钮在顶部消失
给window绑定滚动事件，利用 document.documentElement.clientHeight获取可视窗口的高度，再if语句判断。如果document.documentElement.scrollTop滚动的距离大于页面可视高度的10分之一时就出现按钮。
给按钮赋予点击事件，设置间隔定时器30毫秒执行依次，在里面回调函数通过height减去speed（在不同高度时的速度，随着hieght的减小而减小）让可视窗口与页面顶部的距离缓慢减小，实现点击按钮之后可以由快到慢地回到顶部的效果

htlm部分：

<!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>
    <link rel="stylesheet" href="./返回顶部css.css">
    <script src="./返回顶部js.js"></script>
</head>
<body>
    <h1>小黑子的顶部</h1>
    <button id="btn">返回顶部</button>
</body>
</html>

css部分：

* {
    margin: 0;
    padding: 0;
}

html,body {
    height: 2000px;
    background-color: yellowgreen;
    text-align: center;
}

#btn {
    width: 80px;
    height: 50px;
    position: fixed;
    bottom: 10px;
    right: 5px;
    display: none;
}

js部分：

window.onload = function () {
    var pagelookheight = document.documentElement.clientHeight;//设置页面可视高度
    var obtn = document.getElementById("btn");//获取html的按钮元素

    //实现下拉部分有返回按钮，处于顶部位置时按钮消失
    window.onscroll = function () {
        item();
        function item() {
            var height = document.documentElement.scrollTop;//设置获取垂直滚动的距离
            if (height >= pagelookheight/10) //当垂直滚动的距离大于页面可视高度的10分之一时就出现按钮
            {
                obtn.style.display = "block";
            } 
            else {
                obtn.style.display = "none";
            }
        }
    }

    obtn.addEventListener("click", handler);//给按钮赋予点击事件
    function handler() {
        var time = setInterval(function () //设置间隔定时器
        {
            var back = document.documentElement.scrollTop;//设置滚动条距顶部距离
            var speed = Math.ceil(back / 4);//设置滚动条在不同高度时的速度,向上取整为了到顶而刷新清除定时器
            document.documentElement.scrollTop = back- speed; //scrollTop就减得从多到少，实现回到顶部的速度先快后慢，不会是匀速
            if (document.documentElement.scrollTop== 0) 
            {
                clearInterval(time);//在最顶部时，清除定时器,否则滑不下去
            }
        }, 30);
        //每30毫秒执行一次
    }
}