此文闲来无事写了个返回顶部小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>
时间： 2024-10-20 02:22:23