jquery小demo——返回顶部

此文闲来无事写了个返回顶部小demo，当文档高度大于窗口高度时，返回顶部按钮显示，否则隐藏。

具体代码见下：

<!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>jquery返回顶部</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
.backToTop{ 
display:none;
width:18px; 
line-height:1.2; 
padding:5px 0; 
background-color:#000;
color:#fff;
font-size:12px;
text-align:center;
position:fixed;
/*_position:absolute;*/
right:10px;
bottom:10px;
/*_bottom:"auto";*/
cursor:pointer;
opacity:0.6;
}
</style>
</head>

<body>
<div class="backToTop">返回顶部</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 />换行<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 />
<script>
$(function(){
    var backToTop=$('.backToTop');
    $('.backToTop').click(function(){
        $("html, body").animate({scrollTop: 0 }, 120);
    });
    $backToTopFun = function() {
        var st = $(document).height(), winh = $(window).height();
        (st > winh)? backToTop.show(): backToTop.hide();    
    };
    $(window).bind("scroll",$backToTopFun);
    
})
</script>
</body>
</html>
View Code

 

posted @ 2016-02-14 10:49  cacti_vc  阅读(220)  评论(0)  编辑  收藏  举报