快捷导航
查看: 1920|回复: 1

[分享] jQuery实现的点击平滑跳转到页面指定位置

[复制链接]
发表于 2014-5-13 16:44:42 | 显示全部楼层 |阅读模式
jQuery实现的点击平滑跳转到页面指定位置:
大家一定遇到过网页中可能有这样的效果,那就是当点击网页中的一个链接的时候能够平滑的定位到网页的指定位置,当然使用锚点可以实现此功能,不过过渡不够平滑,下面就通过代码实例介绍一下如何以动画方式平滑的实现此功能。
代码如下:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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语句一章节。
发表于 2017-8-8 20:04:24 | 显示全部楼层
非常实用的代码

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-21 12:35 , Processed in 0.116296 second(s), 23 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表