jquery根据锚点offset值实现动画切换
锚点相信大家都使用过吧！点击后僵硬的切换是不是很不爽呢？
下面分享一个小技巧，根据锚点offset值来实现动画切换
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;}
.main{width:1000px;margin:0auto;position:relative;}
.mainimg{float:left;}
.bg{position:absolute;width:100%;z-index:-5;}
.bg01{height:885px;background:url(../images/b_01.jpg)no-repeatcenter;}
.bg02{height:938px;background:url(../images/b_04.jpg)no-repeatcenter;}
.bg03{height:946px;background:url(../images/b_02.jpg)no-repeatcenter;}
.bg04{height:946px;background:url(../images/b_03.jpg)no-repeatcenter;}
.div_scoll{position:fixed;width:50px;height:200px;right:100px;top:50%;}
a{display:block;background:#3F6;color:#000;width:50px;height:50px;}
</style>
</head>
<body>
<divclass="wrapper">
<divclass="main">
<divid="tab_01"class="tab"><imgsrc="images/m_01.jpg"alt=""/></div>
<divid="tab_02"class="tab"><imgsrc="images/m_04.jpg"alt=""/></div>
<divid="tab_03"class="tab"><imgsrc="images/m_02.jpg"alt=""/></div>
<divid="tab_04"class="tab"><imgsrc="images/m_03.jpg"alt=""/></div>
</div>
<divclass="bg">
<divclass="bg01"id="bg01"></div>
<divclass="bg02"id="bg02"></div>
<divclass="bg03"id="bg03"></div>
<divclass="bg04"id="bg04"></div>
</div>
</div>
<divclass="div_scoll">
<ahref="#bg01">图1</a>
<ahref="#bg02">图2</a>
<ahref="#bg03">图3</a>
<ahref="#bg04">图4</a>
</div>
<script>
$(function(){
$(".div_scolla").click(function(){
$("html,body").animate({scrollTop:$($(this).attr("href")).offset().top+"px"},1000);
});
});
</script>
</body>
</html>