返回头部和底部，初始隐藏！
Posted MingL520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了返回头部和底部，初始隐藏！相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
.gotop{
width:50px;
height:50px;
background: darkred;
color: #fff;
font-size: 16px;
position: fixed;
right:20px;
bottom: 200px;
cursor: pointer;
display: none;
}
.gobottom{
width:50px;
height:50px;
background: darkred;
color: #fff;
font-size: 16px;
position: fixed;
right:20px;
bottom: 140px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div style="height:2000px;width:800px;margin:0 auto;background: green;">
</div>
<div class="gotop">
回到顶部
</div>
<div class="gobottom">
回到底部
</div>
</body>
<script>
function gotop(){
$(window).scroll(function(){
var s=$(window).scrollTop();
s>150 ? $(".gobottom,.gotop").css("display","block") : $(".gobottom,.gotop").css("display","none");
});
$(".gotop").live("click",function(){
$("html,body").animate({scrollTop:0})
})
var h=$("html").height();
$(".gobottom").live("click",function(){
$("html,body").animate({scrollTop:h})
})
}
gotop();
</script>
</html>
以上是关于返回头部和底部，初始隐藏！的主要内容，如果未能解决你的问题，请参考以下文章