页面滚动定位效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
body{
? position:relative;
}
#content{
? width:980px;
? border:1px solid #ccc;
? margin:0 auto;
}
#fixDiv1{
? position:fixed;
? width:50px;
? height:50px;
? background-color:#ddd;
? border:1px solid #ccc;
? right:50px;
? bottom:160px;
? display:none;
? cursor:pointer;
}
#fixDiv2{
? position:fixed;
? width:50px;
? height:50px;
? background-color:#ddd;
? border:1px solid #ccc;
? right:50px;
? bottom:100px;
? cursor:pointer;
}
</style>
</head>
<body>
<div id="content">
<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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="fixDiv1">顶部</div>
<div id="fixDiv2">底部</div>
</body>
<script>
$(function(){
/*
* 仿360导航，右侧页面滚动定位效果；
* made by keimon
* 2013-03-21
*/
?? var win_height = $(window).height(); //788 浏览器高度
?? var web_height = $(document).height(); //2179 总的页面高度
?? var fixDiv1_bottom = parseInt($('#fixDiv1').css('bottom'));
??
?? //滚动滚动条判断高度是否大于浏览器高度，若大于则显示‘顶部’div；
?? $(window).scroll(function(){
??if($(window).scrollTop()>win_height){
???? $('#fixDiv1').show();
??}else{
???? $('#fixDiv1').css({'background-color':'#ddd','bottom':'160px'}).hide();
??}
?? })
??
?? //点击‘底部’div使页面滚动到底部；
?? $('#fixDiv2').click(function(){
????? $('html,body').animate({scrollTop: (web_height-win_height)+'px'},1000); //注意这里用的是$('html,body')
?? })
??
?? //‘底部’div颜色变化；
?? $('#fixDiv2').hover(function(){
????? $(this).css('background-color','pink');
?? },function(){
????? $(this).css('background-color','#ddd');
?? })
??
?? //‘顶部’div的操作；
?? $('#fixDiv1').hover(function(){
????? $(this).css('background-color','pink');
?? },function(){
????? if(!$('#fixDiv1').is(':animated')){
????? $(this).css('background-color','#ddd');
?? }
?? })
??
?? //点击‘顶部’div后，呈现的动画效果；
?? $('#fixDiv1').click(function(){
??? $('html,body').animate({scrollTop: '0px'},1000);
??? $('#fixDiv1').animate({bottom: (win_height-fixDiv1_bottom)*2-100+'px'},1000);
?? })
??
})
</script>
</html>
