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

2022-04-20 02:03:17 阅读：108 来源： 互联网

标签：网页 top totop js 滚动条 var document display

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

效果图：

滚动条在初始位置时

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

标签：网页,top,totop,js,滚动条,var,document,display
来源： https://www.cnblogs.com/bg618/p/16168186.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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