今天无意间看到了360导航-右侧页面滚动定位效果,发现他们做的火箭上升的效果挺有趣的,就模仿了一个类似的。在IE8,ff,opera中测试可以;
具体代码如下:
<!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=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>