回顶部总结二（动画）

最新推荐文章于 2021-01-31 14:37:31 发布

张张张96

最新推荐文章于 2021-01-31 14:37:31 发布

阅读量244

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Girl_0919/article/details/73611139

版权

Javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

关于回顶部加动画效果

    动画有两种：
一种是CSS动画，需要有样式变化配合transition；
一种是javascript动画，使用定时器来实现

主要实现javascript动画即定时器

   1.setInterval、
2.setTimeout和
3.requestAnimationFrame这三种可以

setTimeou

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        #box{height:2000px;overflow: auto;background: red;}
        #top{width:80px;height:80px;line-height: 80px;
            background: #000;opacity: 0.8;color: #fff;text-align: center;font-size: 20px;
            position: fixed;right:10px;bottom:50px;z-index: 2;cursor: pointer;}
        #top:hover{opacity: 1;}
    </style>
</head>
<body>
<div id="box"></div>
<div  id="top"  onclick="totop()">回顶部</div>
<script>
    //解决兼容性
    function getscrolltop(){
        var scrolltop=window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
        return  scrolltop;
    }
   window.onload=function(){
       var top=document.getElementById('top')
       var box=document.getElementById('box')
       top.style.display="none"
       window.onscroll=function(){
           x=getscrolltop();
           if(x>=document.documentElement.clientHeight){
               top.style.display="block";
           }else{
               document.getElementById('top').style.display="none";
           }
       }
   }
    function totop(){
        x-=10;
        document.documentElement.scrollTop=document.body.scrollTop=x;
        jsq=setTimeout(totop,1)
        if(x<=0){
            clearTimeout(jsq)
        }
    }
</script>
</body>
</html>

requestAnimationFrame

    requestAnimationFrame的用法与settimeout相似，只是不需要设置时间间    
 隔，它使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前    
 调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAni
 mationFrame用于取消这个函数的执行

requestAnimationFrame scrollTop

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        #box{height:2000px;overflow: auto;background: red;}
        #top{width:80px;height:80px;line-height: 80px;
            background: #000;opacity: 0.8;color: #fff;text-align: center;font-size: 20px;
            position: fixed;right:10px;bottom:50px;z-index: 2;cursor: pointer;}
        #top:hover{opacity: 1;}
    </style>
</head>
<body>
<div id="box"></div>
<div  id="top"  onclick="totop()">回顶部</div>
<script>
    function getscrolltop(){
        var scrolltop=window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
        return  scrolltop;
    }
    function totop(){
        var timer=requestAnimationFrame(function fun(){
            var x=getscrolltop();
            if(x>0){
                x-=50;
                document.documentElement.scrollTop=document.body.scrollTop=x
                timer=requestAnimationFrame(fun)
            }else{
                cancelRequestAnimationFrame(timer)
            }
        })
    }
</script>
</body>
</html>

requestAnimationFrame scrollTo/scrollBy

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        #box{height:2000px;overflow: auto;background: red;}
        #top{width:80px;height:80px;line-height: 80px;
            background: #000;opacity: 0.8;color: #fff;text-align: center;font-size: 20px;
            position: fixed;right:10px;bottom:50px;z-index: 2;cursor: pointer;}
        #top:hover{opacity: 1;}
    </style>
</head>
<body>
<div id="box"></div>
<div  id="top"  onclick="toTop()">回顶部</div>
<script>
    function getscrolltop(){
        var scrolltop=window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
        return  scrolltop;
    }
    function toTop(){
        var timer=requestAnimationFrame(function fun(){
            var x=getscrolltop();
            if(x>0){
//                scrollTo(0,x-50);
                scrollBy(0,-50)
                timer=requestAnimationFrame(fun)
            }else{
                cancelRequestAnimationFrame(timer)
            }
        })
        //scrollTo() 方法可把内容滚动到指定的坐标。
    }
</script>
</body>
</html>

张张张96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回顶部总结二（动画）

关于回顶部加动画效果动画有两种：一种是CSS动画，需要有样式变化配合transition；一种是javascript动画，使用定时器来实现　主要实现javascript动画即定时器 1.setInterval、2.setTimeout和3.requestAnimationFrame这三种可以setTimeou<!DOCTYPE html><html><head la
复制链接

扫一扫

专栏目录