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

mttp02

已于 2023-01-12 11:35:32 修改

阅读量292

点赞数

文章标签： javascript 前端 html

于 2023-01-11 23:16:24 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128652109

版权

HJZYJS .webp

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

css部分

<style>
  li { 
            height: 100px;
            border-bottom: 1px solid
        }
        #btn{
            position: fixed;
            right: 20px;
            bottom: 20px; 
            background: #ccc; 
            border-radius: 5px;
            padding: 10px 15px;
        }
        </style>

html部分

<body>
    <div class="demo" style="height: 5000px;">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            
        </ul>
    </div>
    <div id="btn"> click</div>

js部分

<script>
    window.onscroll = function(){
        if(window.pageYOffset>300){
            btn.style.display = "block";
        }else{
            btn.style.display = "none";
        }
    }

btn.onclick=function toTop() {
            timer = setInterval( function(){
                //获取滚动条的滚动高度
                var scrollTop = document.documentElement.scrollTop 
                //用于设置速度差，产生缓动的效果
                var speed = Math.floor(-scrollTop / 10);
                document.documentElement.scrollTop = scrollTop + speed;
                //用于阻止滚动事件清除定时器
                if(scrollTop == 0){
                    clearInterval(timer);
                }
            }, 10);
        }
    </script>