回顶部总结二（动画）

来源：互联网发布：程序员翻墙干什么编辑：程序博客网时间：2024/06/06 03:36

关于回顶部加动画效果

    动画有两种：一种是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>

阅读全文

0 0