返回頭部事件案例

forhusa---發表於2017-11-26
事件
<!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>

相關文章