本文介绍了一种利用jQuery库实现的页面滚动效果。当页面滚动到特定位置时，显示固定区块，并通过点击导航链接平滑滚动到相应部分。文章包含完整的HTML结构和jQuery脚本代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<body>
<script>
$(window).scroll(function(){
var targetTop = $(this).scrollTop();
if(targetTop>900){
$('#mrt').css('display','block');
}else{
$('#mrt').css('display','none');
}
});
$(function(){
$("ul li a").click(function(){
var hr = $(this).attr("href");
var anh = $(hr).offset().top;
$("html,body").stop().animate({scrollTop:anh},2000);
return false; //防止重新加载
});
})
</script>
<style>
ul{
position:fixed;
top:0;
background:#999999;
}
ul li{
float:left;
margin:10px;
padding:10px;}
</style>
<ul>
<li><a href="#us">111111</a></li>
<li><a href="#about">22222</a></li>
<li><a href="#prouct">33333</a></li>
<li><a href='http://www.baidu.com'>44444</a></li>
<li>55555</li>
<li>66666</li>
</ul>
<div id='mrt' style='width:200px; display:none; height:200px; COLOR:WHITE; position:fixed; top:50px;'>asdasdasdASSSSSS</div>
<div style="clear:both;"></div>
<div id="us" style="height:820px; background:#6699CC; width:100%;"></div>
<div id="about" style="height:820px; background:#0066CC; width:100%;"></div>
<div id="prouct" style="height:820px; background:#003366; width:100%;"></div>
</body>
</html>
扫一扫
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
