js实现网页滚动条回到顶部

2022/4/20 6:13:35

编程Tag： js 网页 var 滚动条 top document display totop

本文主要是介绍js实现网页滚动条回到顶部，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>

</head>
<style>
    body{
        cursor: pointer;
    }
    .top{
        width: 100%;
        height: 100px;
        background-color: aqua;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
    }
    .top input{
        width: 500px;
        height: 20px;
        border: 1px solid #000;
        margin: 40px 500px;
    }
    .box{
        width: 20px;
    }
    .totop{
        position: fixed;
        right: 50px;
        bottom: 150px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #000;
        display: none;
        
    }
</style>
<body>
    
    <div class="top">
        <input type="search" value="这是顶部">
    </div>
    <div class="box">
        不要问我 一生曾经爱过多少人 你不懂我伤有多深 要剥开伤口总是很残忍 劝你别做痴心 多情暂且保留几分 不喜欢孤独 却又害怕两个人相处  这分明是一种痛苦 在人多时候最沉默 笑容也寂寞 在万丈红尘中 啊 找个人爱我 当我避开你的柔情后 泪开始坠落 
        
        是不敢不想不应该 再谢谢你的爱 我不得不存在 像一颗尘埃 还是会带给你伤害是不敢不 不应该 我不得不存在 在你的未来 最怕这样就是带给你永远的伤害  不喜欢孤独 却又害怕两个人相处 这分明是一种痛苦 在人多时候最沉默 笑容也寂寞 在万丈红尘中 找个人爱我
        
        当我避开你的柔情后 泪开始坠落 是不敢不想不应该 再谢谢你的爱 我不得不存在 像一颗尘埃  还是会带给你伤害  是不敢不想不应该  再谢谢你的爱  我不得不存在 啊
        在你的未来  最怕这样就是带给你永远的伤害
    </div>
    <div class="totop"> 顶部 </div>

</body>
<script>
//获取top
var topbox = document.querySelector('.top');
var totop = document.querySelector('.totop');
window.onscroll = function(){
    // 兼容写法
    var t = document.documentElement.scrollTop || document.body.scrollTop
    // 判断滚动条的高度让顶部和回到顶部按钮显示和隐藏
    if(t >= 3000){

        topbox.style.display = totop.style.display = 'block'
    }else{
        topbox.style.display = totop.style.display = 'none'
    }
    // console.log(h);
}
    // 给回到顶部按钮添加点击事件
 totop.onclick = function(){
    //  兼容写法
    var t = document.documentElement.scrollTop || document.body.scrollTop
    // 设置定时器制作动画效果
    var timer = setInterval(function(){
        // 高度自减回收过程
        t -= 20
        console.log(1)
        // 当高度为0清除定时器 - 停止动画
        if(t <= 0){
            clearInterval(timer)
        }
        // 重新将高度t赋值给滚动的高度
        document.documentElement.scrollTop = document.body.scrollTop = t
    },20)
}

</script>
</html>

效果图：

滚动条在初始位置时

滚动条到达指定位置时 - - 点击下面顶部按钮就会慢慢滚动到初始位置

这篇关于js实现网页滚动条回到顶部的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js实现网页滚动条回到顶部

相关编程文章