jQuery点击平滑跳转到页面指定位置
jQuery点击平滑跳转到页面指定位置属于前端实例代码，有关更多实例代码大家可以查看。
大家一定遇到过网页中可能有这样的效果，当点击网页中一个链接时候能够平滑的定位到网页的指定位置，当然使用锚点可以实现此功能，但过渡不平滑，下面通过代码实例介绍一下如何以动画方式平滑的实现此功能。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
ul, li{list-style:none}
body{
line-height:1.5;
font-size:12px
}
a:link, a:visited{
color:#0099FF;
text-decoration:none
}
a:hover{text-decoration:underline}
.main{
width:980px;
margin:0 auto
}
#menu li{
float:left;
width:200px;
margin-right:1px;
border:1px solid #990000;
line-height:20px;
font-size:1em;
text-align:center
}
#menu li a{
display:block;
width:200px;
height:20px;
text-decoration:none
}
#menu a:link, #menu a:visited{
background:#990033;
color:#FFFFCC
}
#menu a:hover, #menu a:active{
background:#FF0000;
color:#fff
}
fieldset{
clear:both;
}
.box{
height:300px;
padding:10px;
position:relative
}
.box span{
position:absolute;
left:20px;
bottom:10px
}
.filler{
height:400px;
width:1px;
background:#ccc;
overflow:hidden;
clear:both
}
.vertical{
width:5000px;
border:1px solid #ccc;
height:80px;
padding:10px
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$.fn.anchorGoWhere = function(options){
var obj =this;
var defaults = {target:0, timer:1000};
var o = $.extend(defaults,options);
obj.each(function(index){
$(obj[index]).click(function(){
var _rel = $(this).attr("href").substr(1);
switch(o.target){
case 1:
var _targetTop = $("#"+_rel).offset().top;
$("html,body").animate({scrollTop:_targetTop},o.timer);
break;
case 2:
var _targetLeft = $("#"+_rel).offset().left;
$("html,body").animate({scrollLeft:_targetLeft},o.timer);
break;
}
return false;
});
});
};
$(document).ready(function(){
$(".goTop").anchorGoWhere({target:1});
$(".goDown").anchorGoWhere({target:1});
$(".goNext").anchorGoWhere({target:1});
$(".goFront").anchorGoWhere({target:1});
$(".goVertical").anchorGoWhere({target:2});
});
</script>
</head>
<body id="body">
<div class="main">
<ul id="menu">
<li><a href="#menu1" class="goDown">菜单一</a></li>
<li><a href="#menu2" class="goDown">菜单二</a></li>
<li><a href="#menu3" class="goDown">菜单三</a></li>
<li><a href="#menu4" class="goDown">菜单四</a></li>
</ul>
<div class="filler"></div>
<fieldset>
<legend id="menu1">菜单一的内容</legend>
<div class="box"></div>
</fieldset>
<div class="filler"></div>
<fieldset>
<legend id="menu2">菜单二的内容</a></legend>
<div class="box"></div>
</fieldset>
<div class="filler"></div>
<fieldset>
<legend id="menu3">菜单三的内容</legend>
<div class="box"></div>
</fieldset>
<div class="filler"></div>
<fieldset>
<legend id="menu4">菜单四的内容</a></legend>
<div class="box"></div>
</fieldset>
</div>
</body>
</html>
点击导航栏菜单可以实现网页内部的平滑定位效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.$.fn.anchorGoWhere=function(options){}，为jquery对象实例添加函数，参数options会传递一个对象直接量作为参数。
（2）.var obj=$(this)，声明一个obj，存储jquery对象，这里的this是指向一个jquery对象，不要认为只要是this就是指向dom对象。
（3）.var defaults={target:0,timer:1000}，定义对象直接量，用来作为默认的一些参数，target:0表示不进行定位，timer:1000表示一秒。
（4）.var o=$.extend(defaults,options)，使用参数options扩展对象defaults，在本例中其实修改第一个参数target。
（5）.this.each(function(i){})，遍历jquery对象中的每一个元素，这里也就是链接。
（6）.$(obj).click(function(){})，为每一个链接注册click事件处理函数。
（7）.var _rel=$(this).attr("href").substr(1)，截取字符串，比如"#menu1"就被截取为"menu1"。
（8）.switch(o.target){}，一个switch语句。
（9）.case 1，如果o.target的值是1。
（10）.var _targetTop=$("#"+_rel).offset().top，获取匹配的legend元素距离文档顶部的距离。
（11）.$("html,body").animate({scrollTop:_targetTop},o.timer)，使用动画方式设置滚动条的垂直偏移量，值是_targetTop，这样就会平滑的定位到匹配元素位置。
（12）.return false，取消链接的默认动作，这里的作用就是取消锚点定位效果。
二.相关阅读:
（1）.$.extend()参阅$.extend()函数用法详解一章节。
（2）.$.fn参阅jQuery.fn 作用是什么一章节。
（3）.each()参阅jQuery each()方法一章节。
（4）.attr()参阅jQuery attr()方法一章节。
（5）.substr()参阅javascript substr()方法一章节。
（6）.offset()参阅jQuery offset()一章节。
（7）.switch语句参阅javascript switch语句一章节。
jQuery点击平滑跳转到页面指定位置，这样的场景在实际项目中还是用的比较多的，关于jQuery点击平滑跳转到页面指定位置就介绍到这了。