JS实现简单的回到顶部

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>回到顶部</title>
    <style type="text/css">
        body{height:3000px;background:#ececec;}
        #uptop{display:none;position:fixed;font-size:12px;text-align:center;width:20px;height:55px;
               bottom:0;right:0;background: #9eceb7;border: 1px solid #333}
        #uptop:hover{cursor: pointer;background: #3a6d8c;color: #FFFFFF}
    </style>
</head>

<body>
<h1>1回到顶部测试</h1>
<h1>2回到顶部测试</h1>
<h1>3回到顶部测试</h1>
<div id="uptop" onclick="scroTop()">回到顶部</div>

<script type="text/javascript">
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        var div_up = document.getElementById("uptop");
        t > 300 ? div_up.style.display="block" : div_up.style.display="none";
    }

    function scroTop(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
</script>
</body>
</html>

 

 

posted @ 2013-05-17 15:03  风残零度  阅读(926)  评论(0)    收藏  举报