返回顶部按钮（先快后慢效果）

最新推荐文章于 2024-07-12 09:36:48 发布

l20040121_

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量350

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/l20040121_/article/details/128648401

版权

需求：点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方。
实现原理：
1.固定按钮并设计样式
2.给windows绑定滚动事件，并将到达顶部时设成display：none实现按钮消失
3.绑定点击事件，定义函数功能，在scrolltop=0时重置计时器，算速度除以的数值越大，速度越慢。设置每100ms执行一次

<!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>
    <style>
        body{
            height: 10000px;

        }/*先设置页面高度*/
        #anniu{
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: block;
        }
        img{
            height: 10px;
            width: 10px;
        }/*设置按钮样式和位置*/
    </style>
</head>
<body>
    <button id="anniu">
        <img src="./picture/上传.png" alt="">
    </button>
    <script>
        window.onscroll=function(){
            if(document.documentElement.scrollTop>0){
                anniu.style.display='block'
            }else{
                anniu.style.display='none'
            }/*通过使用documentelement设置节点*/
        }
        anniu.onclick=function(){
            timer = setInterval(function(){
                var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                var Speed=Math.floor(0-scrollTop/5);
                if(scrollTop == 0){
                    //不关闭定时器，会导致第一次回到顶部之后，导致不能在响应用户的滚动，不定的触发回到顶部
                    clearInterval(timer);
                }
                //当按钮启动页面滚动，设置为true
                jieguo=true;
                document.documentElement.scrollTop=document.body.scrollTop=scrollTop+Speed;
            }, 100);
        }
    
    </script>
</body>
</html>

QQ录屏20230111174802

l20040121_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
返回顶部按钮（先快后慢效果）

3.绑定点击事件，定义函数功能，在scrolltop=0时重置计时器，算速度除以的数值越大，速度越慢。设置每100ms执行一次。需求：点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方。//不关闭定时器，会导致第一次回到顶部之后，导致不能在响应用户的滚动，不定的触发回到顶部。/*通过使用documentelement设置节点*///当按钮启动页面滚动，设置为true。QQ录屏20230111174802。/*设置按钮样式和位置*/1.固定按钮并设计样式。/*先设置页面高度*/
复制链接

扫一扫