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点击平滑跳转到页面指定位置就介绍到这了。

回复

我来回复
  • 暂无回复内容