页面返回顶部

Smulll_

已于 2023-01-11 20:00:29 修改

阅读量576

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

于 2023-01-11 19:26:20 首次发布

本文链接：https://blog.csdn.net/weixin_74155781/article/details/128649732

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

考核二-任务一：页面返回顶部

需求
html部分
css部分
JavaScript部分
样式截图
实现原理

需求

在这里插入图片描述

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>
    <link rel="stylesheet" href="D:\Web\考核二-任务一\考核二-任务一.css">
</head>
<body>
        <div id="box1">
            我在顶部
        <button id="btn">回到顶部</button>
        </div>

    <script type="text/javascript" src="D:\Web\考核二-任务一\考核二-任务一.js">
    </script>
</body>
</html>

css部分

*{
    padding: 0;
    margin: 0;
}
ul ol{
    list-style: none;
}
a{
    text-decoration: none;
}
#box1{
    height: 2500px;
    width: 600px;
    margin: 0 auto;
    background-color: aquamarine;
}
#btn{
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 5px;
    right: 5px;
    display: none;
}

JavaScript部分


window.onscroll=function(){
    console.log(console.log(document.documentElement.scrollTop||document.body.scrollTop))

    if((document.documentElement.scrollTop||document.body.scrollTop)>50){
        console.log("显示回到顶部按钮")
        btn.style.display="block"
    }else{
        console.log("隐藏回到顶部按钮")
        btn.style.display="none"
        }
    }
    btn.onclick=function(){
        var timer = setInterval(function(){
            var oTop = window.scrollY
            var oft = oTop-(oTop*0.2+100)
            if(oft>0){
                window.scrollTo(0,oft);
            }else{
                window.scrollTo(0,0);
                clearInterval(timer);
            }
        },30)
    }