<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现页面底部滑动置顶 | alleyloft.com</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
//置顶按钮显示/隐藏实现
$(window).scroll(function(){
var w_height = $(window).height();//浏览器高度
var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度
if(scroll_top > w_height){
$("#goto-top").fadeIn(500);
}else{
$("#goto-top").fadeOut(500);
}
});
//置顶
$("#goto-top").click(function(e){
e.preventDefault();
$(document.documentElement).animate({
scrollTop: 0
},200);
//支持chrome
$(document.body).animate({
scrollTop: 0
},200);
});
})
</script>
<style type="text/css">
#goto-top {
display:none;
position:fixed;
38px;
height:36px;
background:url(images/goto-top.png) no-repeat 0 0;
bottom:40px;
right:40px;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s;
z-index:9999;
}
#goto-top:hover {
background:url(images/goto-top.png) no-repeat 0 -36px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
jQuery实现页面底部滑动置顶 <span>- alleyloft.com</span>
</div>
</div>
<div class="placeholder"></div>
<div class="nav">
<div class="ul-box">
<ul class="links">
<li><a href="http://www.alleyloft.com" target="_blank" class="cur">小巷阁楼</a></li>
<li><a href="http://www.alleyloft.com/blog" target="_blank">生活随笔</a></li>
<li><a href="http://www.alleyloft.com/share" target="_blank">技术分享</a></li>
<li><a href="http://www.alleyloft.com/psd" target="_blank">原创PSD作品</a></li>
<li><a href="http://www.alleyloft.com/html" target="_blank">静态HTML模板</a></li>
<li><a href="http://www.alleyloft.com/photo" target="_blank">个人随拍</a></li>
<li><a href="http://www.alleyloft.com/index" target="_blank">音乐欣赏</a></li>
<li><a href="http://www.alleyloft.com/aboutme" target="_blank">关于我</a></li>
</ul>
</div>
</div>
<div class="con">
<div class="show">
<div class="banner">
<a href="http://www.alleyloft.com/photo" target="_blank">
<img alt="小巷阁楼-alleyloft" title="个人随拍" src="images/banner.jpg" />
</a>
</div>
<div class="article">
<!--文章内容区-->
</div>
</div>
</div>
<a href="#" title="返回顶部" id="goto-top"></a>
</body>
</html>