返回头部事件案例

来源：互联网发布：东莞淘宝摄影编辑：程序博客网时间：2024/06/01 09:40
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><style>    img {        position: fixed;        bottom: 100px;        right: 50px;        cursor: pointer;        display: none;        border: 1px solid #000;    }    div {        width: 1210px;        margin: 100px auto;        text-align: center;        font: 500 26px/35px "simsun";        color: red;    }</style><script src="animate.js"></script><!--自己封装的js--><script>    window.onload=function() {        var img = document.getElementsByTagName("img")[0];        window.onscroll=function(){            if(scroll().top>100){/*自己封装的方法scroll()*/                img.style.display="block";            }else{                img.style.display="none";            }                   }        img.onclick=function(){            window.scrollTo(0,0);        }    }</script><body><img src="images/Top.jpg"/><div>    最顶端.....<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br>    我爱北京天安门...<br></div></body></html>
阅读全文
0 0