js返回到顶部

原理很简单，使用jquery实现的。

代码就不封装了，一眼看出原理。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>返回到顶部</title>
<style type="text/css">
*{ margin:0;padding:0; }
body { font:12px/1.5 arial; }
.wrap { border:2px solid orange; }
p { height:400px; }
.btn { display:none; position:fixed; _position:absolute; bottom:10px; right:10px; padding:10px; border:2px solid orange;  cursor:pointer; }
</style>
</head>

<body>
<div class="wrap"><p>test</p>
<p>jkdkdkdkdkdkd</p>
<p>jkdkdkdkdkdkd</p>
<p>jkdkdkdkdkdkd</p>
<p>jkdkdkdkdkdkd</p>
<a href="#" id="btn" class="btn">返回顶部</a></div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
    var btn=$('#btn');
    $(window).scroll(function(){
        var minHeight=100,
        windowTop=$('body').scrollTop();
        if(windowTop>minHeight)    {
            btn.show();
        }else{
            btn.hide();
        }
    });
    btn.bind('click',function(){
        $('body').animate({scrollTop:0},700);
        $(this).hide();    
    });
});

</script>
</body>
</html>
posted @ 2012-07-23 14:58  xmlovecss  阅读(253)  评论(0)  编辑  收藏  举报