<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery浮动定位层导航描点上下滚动的浮动导航</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.container{width:980px;margin:0 auto;background:#ccc;}
/** 翻屏 **/
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html #roll{_margin-right:-224px;_position:absolute;_margin-top:180px;_top:expression(eval(document.documentElement.scrollTop));}
#roll{display:block;width:100px;margin-right:-263px;position:fixed;right:50%;top:33%;}
#fall{cursor:pointer;}
#ct{cursor:pointer;}
#roll_top{cursor:pointer;}
</style>
</head>
<body>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
// 滚屏
$(document).ready(function(){
$('#roll_top').click(function(){
$('html,body').animate({scrollTop: '0px'}, 800);
});
$('#ct').click(function(){
$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
});
$('#fall').click(function(){
$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
});
});
</script>
<div class="container">
<div id="header" style="height:1330px; background-color:#f60"></div>
<div id="comments" style="height:625px;background-color:#f0f0f0"></div>
<div id="footer" style="height:320px;background-color:#ddd"></div>
</div>
<div id="roll">
<div title="回到顶部" id="roll_top">回到顶部</div>
<div title="我要留言" id="ct">我要留言</div>
<div title="转到底部" id="fall">转到底部</div>
</div><!--roll end-->
</body>
</html>
2174
11-23
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
