顶部悬浮和回到顶部效果

最新推荐文章于 2023-09-16 23:12:19 发布

handsome_man__

最新推荐文章于 2023-09-16 23:12:19 发布

阅读量602

点赞数 1

文章标签： js javascript css html css3

本文链接：https://blog.csdn.net/handsome_man__/article/details/104885761

版权

如何做一个简单的顶部悬浮和回到顶部效果呢？
在这里插入图片描述

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
*{
    padding: 0;
    margin: 0;
}
.top{
    width:100%;
    height:0;
    background-color: red;
    text-align: center;
    line-height:80px;
    font-size:50px;
    color:#fff;
    position: fixed;
    top:0;
    /* display:none; */
    transition: height 2s;
}
.content{
    width:20px;
}
.back{
    width:50px;
    height:50px;
    line-height:50px;
    background-color: #abcdef;
    color:#00f;
    text-align: center;
    position: fixed;
    right:30px;
    bottom:50px;
    font-size:30px;
    font-weight:bold;
    display:none;
}
</style>
<body>
<div class="top">
    这是悬浮的顶部
</div>
<div class="content">
    草
    离离原上草，
    一岁一枯荣。
    野火烧不尽，
    春风吹又生。
    画
    远看山有色，
    近听水无声。
    春去花还在，
    人来鸟不惊。
    我爱学习
    我爱杯中酒，
    爱之不敢求。
    学道北海仙，
    习之势翩翩。
</div>
<div class="back">
    ↑
</div>
</body>
<script type="text/javascript">
// 只要滚动条发生滚动了，就判断滚动过多少距离，如果大于等于300了，就应该让顶部出现了
// 滚动事件

// 获取回到顶部
var b = document.querySelector(".back");
window.onscroll=function(){
    // console.log(123);
    // 获取滚动过距离
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(t);
    // 判断这个距离是否大于等于300
    // 获取顶部元素
    var up = document.querySelector(".top");
    if(t>=300){
        // 如果大于等于300了，就让顶部出现
        // 让顶部出现就是让他的display变成block
        // up.style.display = "block"
        up.style.height = "80px"
    }else{ // 上面的时候消失
        // up.style.display = "none"
        up.style.height=0;
        // console.log(up);
    }

    // 回到顶部
    if(t>=400){
        b.style.display="block"
    }else{
        b.style.display="none"
    }

    // 判断滚动条是否回到了0的位置
    if(t<=0){
        // 清除定时器
        // 局部定义的变量，在另一个局部没法使用
        clearInterval(timer);
    }
}
var timer; // 必须变成全局的变量，两个局部中才都能使用
// console.log(b);
// 给回到顶部绑定单击事件
b.onclick=function(){
    // 让滚动过的距离变成0 - 滚动过的距离可以获取，也可以设置
    // document.documentElement.scrollTop = 0
    // document.body.scrollTop = 0
    // 这种回到顶部是瞬间回去的 - 慢慢回去
    // 用到每个一会就 让滚动过的距离减小一点 - 定时器
    timer = setInterval(function(){
        // 先获取到滚动过的距离，
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        // 然后减小一点
        var t1 = t-5;
        // 然后将减小的值 赋值 给 滚动过的距离
        document.documentElement.scrollTop = t1
        document.body.scrollTop = t1
        console.log(123);
    },20);
}
</script>
</html>

在这里插入图片描述

handsome_man__

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
顶部悬浮和回到顶部效果

如何做一个简单的顶部悬浮和回到顶部效果呢？代码如下：<!doctype html><html><head><meta charset="utf-8"><title>Document</title></head><style>*{ padding: 0; margin:...
复制链接

扫一扫