返回顶部设置

最新推荐文章于 2024-07-25 09:24:40 发布

self_correction

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量566

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/self_correction/article/details/128678031

版权

返回顶部

一、Demo
- <1>.要求
- <2>.功能
二、实现原理
代码
四、效果展示

一、Demo

<1>.要求

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

<2>.功能

当用户访问网页时，可以迅速的返回顶部。

二、实现原理

思路：先通过Html和Css设置好静态，然后通过Js调整button的属性

Html和Css部分都是简单的操作，着重点在于Js。

有2点需要设置：
第一点：如何设置button的隐藏？
答：通过if else语句，当滚动到一定距离时，显示出button
第二点：如何实现由快到慢上滑？
答：通过设置定时器，以及清楚定时器来实现

代码

<1>.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>返回顶部</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="test">1</div>
    <div class="test">2</div>
    <div class="test">3</div>
    <div class="test">4</div>
    <button>返回顶部</button>


    <script src="./index.js"></script>
</body>
</html>

<2>.Css

*{
    margin: 0;
    padding: 0;
}
.test{
    height: 500px;
    width: 700px;
    border: 10px solid blue;
    margin: 100px auto;
    font-size: 100px;
    text-align: center;
    line-height: 500px;
}
button{
    position: fixed;
    right: 20px;
    bottom: 20px;
}

<3>.Js

var button = document.querySelector('button')                           //获取button标签

window.onscroll = function(){                                           //设置隐藏
    if(window.pageYOffset > 200){
        button.style.display = "block";
    }else{
        button.style.display = "none";
    }
}

button.addEventListener('click',function(){
    var timeId = setInterval(function(){                                 //利用定时器控制由快到慢上滑
        var scrollTop = document.documentElement.scrollTop;              //获取页面滑动距离
        if(scrollTop <= 0){
            clearInterval(timeId);                                       //当滑动距离小于0时，清楚定时器的作用
        }else{
            scroll(0,scrollTop - 100);                                  //设置滑动距离
        }
    },10)                                                 
})