关于锚点跳转及jQuery下相关操作与插件

标签: jquery 相关 插件 | 发表时间:2014-04-23 15:10 | 作者:娄宗超
分享到:
出处:http://www.iteye.com
一、锚点跳转简介
锚点嘛,业余点的解释就是可以让页面定位到某个位置的点。在高度较高的页面中经常见到,例如,百度百科页面,《火影忍者》这个词条,结果就会看到如下的锚点列表:
百度百科词条锚点跳转 张鑫旭-鑫空间-鑫生活
点击其中一个链接,就会跳转到页面的相应位置。这就是锚点的作用之一。锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处。
不同页面的锚点跳转 张鑫旭-鑫空间-鑫生活
起关键作用的就是链接地址后面跟着的#comments,见下图标示:
不同页面锚点跳转关键 张鑫旭-鑫空间-鑫生活
我知道的实现锚点跳转有两种方式,一种是a标签+name属性,还有一种就是使用标签的id属性。百度百科就是使用的a标签的name属性实现锚点跳转的,见下图:
百度百科name锚点 张鑫旭-鑫空间-鑫生活
上图效果更具体点表示是:
<a href="#2">作者介绍></a>            <a name="2"></a>
早在大学跟某女交往的那会儿,我就已经放弃使用a+name的锚点方法了。一是使用了一个空标签,有铺张浪费,挪用公款之嫌;二是经常会出现锚点失效的情况。所以,我都是使用id来绑定锚点的,迄今为止,没有出过什么纰漏。如果使用id实现,则上图所示效果对应代码应该类似下面:
<a href="#2">作者介绍></a>            <h2 id="2">作者介绍</h2>
说明:本文下面所有锚点内容专指id锚点。
二、含锚点跳转的URL地址
1. 关于”#”
在页面制作中,”#”这个符号相当常见,且具有一定的通用性。基本上,其表示的含义是id选择符。例如在CSS中#header{}就表示id为header标签的样式如何如何;在jQuery中,$(“#header”)表示选择id为header的标签为jQuery对象;同样的,在页面的URL中,”#”也可以理解为id选择符之意,也就是页面跳转到含URL指向的id的标签处。
例如,我们在浏览器地址栏中输入或是复制如下URL:http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html#0
由于URL地址末尾带有”#”标识符,这就相当于告诉浏览器:“哥,小妹要跳了,你要接好我哦!可爱”。由于”#”后面跟着的是0,所以呢,浏览器就会在地址为http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html的页面上寻找符合”#0″特点的标签,并执行跳转。在此页面上,有个js动态创建的渐变背景,从上到下有256个标签,id从0~255,我们看下firebug下的html代码展示。
id为0的标签 张鑫旭-鑫空间-鑫生活
所以,这个页面载入后,应该立即跳转到渐变背景的顶部。如下图所示:
跳转到渐变背景的顶部 张鑫旭-鑫空间-鑫生活
您可以狠狠地点击这里:“#0″锚点的跳转测试
2. 关于空锚点指向
如果URL中”#”后面跟随的字符id在文中找不到,那么会如何呢?如果是在当前页面,则页面没有跳转,唯一变化的就是URL地址;如果是从其他页面跳转过来,则页面顶部显示,”#”基本上就是聋子的耳朵——摆设。
您可以狠狠地点击这里:空锚点页面跳转测试,这里的锚点标示是”#aaa”,但是由于页面上没有id为”aaa”的标签或是name为”aaa”的a标签,所以,”#aaa”纯粹就是个打酱油的。
再如果,页面的URL后面只有一个孤单的”#”,或是页面某链接指向单单是个”#”(<a href=”#”></a>),则页面顶部显示。所以,一般页面的回到顶部效果都是使用一个孤单的”#”作为锚点链接的。例如淘宝网的返回首页:
淘宝网返回首页 张鑫旭-鑫空间-鑫生活
对应的html代码如下图所示:
淘宝网返回首页html代码 张鑫旭-鑫空间-鑫生活
三、jQuery下锚点的平滑跳转
对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见。jQuery库已经为我们做了很多的工作了,所以,在jQuery下实现锚点的平滑跳转是简单轻松的。例如,我们要让页面平滑滚动到一个id为box的元素处,则jQuery代码只要一句话,如下:
$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
其中animate为jQuery自定义动画方法,$(“#box”).offset().top表示id为box的jQuery对象距离页面顶部的偏移值,1000表示平滑动画执行的时间为1000毫秒,也就是1秒。
为了直观的表示效果,我做个个简单的demo页面。您可以狠狠地点击这里:锚点平滑跳转demo
点击下图所示文字链接,就可以看到平滑跳转效果了:
平滑效果文字链接 张鑫旭-鑫空间-鑫生活
相应的代码如下:
HTML部分

<div id="top" class="append_box mb20">
    平滑跳转到底部:<a href="#bottom" class="smooth">滑到底部</a>
</div>
<div id="appendBox" class="append_box">
    <img width="300" height="3281" src="http://ss4.sinaimg.cn/bmiddle/6200b7a8t8b6743480673&690" />
</div>
<div id="bottom" class="append_box mb20">
    平滑回到顶部:<a href="#top" class="smooth">回到顶部链接</a>
</div>
JS部分

$(".smooth").click(function(){
    var href = $(this).attr("href");
    var pos = $(href).offset().top;
    $("html,body").animate({scrollTop: pos}, 1000);
    return false;
});
四、IE下锚点刷新失效及jQuery下的解决
1、关于锚点刷新失效
所谓“锚点刷新失效”指的是当我们再次刷新页面(F5)的时候,即使此时的URL后面就随锚点,此锚点也是不起作用的。
还是拿最开始的例子演示,,我们在浏览器地址栏中输入或是复制如下URL:http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html#0,或是点击这里。我们第一次进入这个页面的时候,锚点是正常的,页面定位到渐变背景的顶端。ok,现在,我们把页面滚动到顶部,如下图所示:
滚动到顶部 张鑫旭-鑫空间-鑫生活
此时,我们再按下浏览器刷新按钮(或是F5),可以看到在IE浏览器下,页面依旧顶部显示,也就是说页面的锚点(#0)不再起作用了。大多数情况下,可能对我们的影响不是很大,但是有时候,例如我们在论坛里发布了一个帖子,发帖页面和帖子列表页面是同一页面,帖子提交后,我们想把页面定位到刚发的帖子处,在IE浏览器下就无法通过修改URL加锚点的方式实现。
如果让IE浏览器即使是同一URL刷新也能实现锚点定位呢?在jQuery下,不难实现。我们可以根据URL获取锚点,从而进一步获得对应的锚点对象,然后再让页面的滚动高度为其距离页面顶部的偏移值就可以了。文字叙述再精彩也不及实例来的直观,例如我们要处理一个链接地址为:http://www.zhangxinxu.com/study/201007/anchor-jump-test-3-demo.html#0的页面,要让其无论是重新载入还是当前页面刷新,其后面的锚点地址”#0″都要起作用。
其js代码如下,(与页面内容无关)
$(function(){
    var url = window.location.toString();
    var id = url.split("#")[1];
    if(id){
        var t = $("#"+id).offset().top;
        $(window).scrollTop(t);
    }   
});
您可以狠狠地点击这里:IE浏览器下刷新锚点失效修复demo
五、jQuery任意标签锚点跳转插件
上面所有提到锚点跳转的发起要不是页面的载入,要不就是a标签通过链接发起。其实我们可以点击任意标签实现锚点的跳转的。所以,我就特别写了个简单的jQuery插件,以实现任意标签页面任意位置的锚点跳转(可平滑)。
demo及下载
您可以狠狠地点击这里:任意标签锚点跳转demo
您可以狠狠地点击这里:jquery.anchor.1.0.js 1015字节 [右键-目标|链接另存为]
点击demo的文字链接或是按钮,均有跳转效果。
任意标签锚点跳转demo 张鑫旭-鑫空间-鑫生活
参数
参数 默认 解释
ieFreshFix true 布尔型,默认修复IE下刷新锚点不起作用的问题
anchorSmooth true 布尔型,默认平滑跳转
anchortag anchor 字符串,用以绑定id的标签属性,默认是"anchor",属于自定义属性
animateTime 1000 整数,动画执行的时间,如果anchorSmooth为false,则此参数无效
插件使用
此插件的方法为:zxxAnchor()。
插件插件要想使用,需要对触发锚点跳转的标签进行一些设置。在默认情况下,要给标签添加一个自定义的属性anchor,例如:
<button id="btnTop" type="button" anchor="top">点击我吧</button>
这里的按钮就添加了一个自定义的anchor属性,属性值是”top”,表示的意思就是页面跳转到id为top的元素处。此时直接调用zxxAnchor方法就可以了,如下代码:
$("#btnTop").zxxAnchor();
当然,我们可以不使用默认的anchor标签,例如我们可以使用a标签的href属性,只要在绑定zxxAnchor方法时修改下参数就可以了,例如:
<a href="#bottom" class="smooth">滑到底部</a>
对于的jQuery代码如下:
$(".smooth").zxxAnchor({
    anchortag: "href"   
});
对照上面的参数表可知,上面的代码是设置绑定锚点对象的属性由默认的”anchor”改为了”href”。
基本使用就是如此,其他一些参数您可以参见上面的参数表,这里不多说了。
插件优点
支持任意标签,任意位置的锚点跳转,支持平滑效果。同时不改变页面的URL地址。
六、结语
时间仓促,资历有限,若有有表述错误,欢迎指正。就这些。希望能对有需要的人提供一些帮助。
如果您觉得本文的内容对您的学习有所帮助:支付鼓励

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery 相关 插件] 推荐:

10款实用的Ajax相关的jQuery插件推荐

- jingjing - ITeye资讯频道
本文搜集了10款最近受欢迎的、实用的AJAX jQuery插件,包括终端命令行、分页、图表、购物车插件等,你可以在你的网站或应用中使用这些插件,以达到意想不到的效果. 该插件可以在网站上实现终端交互效果. 这可不是FTP或SSH终端,你可以定义交互的命令. 该插件可以使用多种方式来解决页面分页问题,它采用一个简单而直截的Callback设计.

分享5个viewport相关的jQuery插件

- - ITeye博客
日期:2012-11-16  来源: GBin1.com. 在web和网站开发中我们常常需要处理viewport相关的功能,在前面的文章中我们曾经介绍过 javascript响应式视图(viewport)切换工具类库 ,今天这里我们再介绍5个和viewport相关的 jQuery插件 ,希望大家喜欢.

关于锚点跳转及jQuery下相关操作与插件

- - 浏览器 - 互联网 - ITeye博客
锚点嘛,业余点的解释就是可以让页面定位到某个位置的点. 在高度较高的页面中经常见到,例如,百度百科页面,《火影忍者》这个词条,结果就会看到如下的锚点列表:. 百度百科词条锚点跳转 张鑫旭-鑫空间-鑫生活. 点击其中一个链接,就会跳转到页面的相应位置. 锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

常用JQuery插件整理

- xxg - 博客园-首页原创精华区
  虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来.   jquery.HooRay(哈哈,自己写的插件是必须有的).   jquery UI(官方的UI插件,功能很多,但我只用少数几个).   artDialog(很欣赏这个插件,又强大又美观).

2010年最佳jQuery插件

- seenxu - 博客园新闻频道
在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来. WDL的作者从大量的优秀 jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件(排名不分先后):. 一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容.

JQuery图表插件——Highcharts

- We_Get - 博客园-首页原创精华区
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.

[原]jQuery ListBox Plugin(ListBox插件)

- We_Get - 博客园-首页原创精华区
转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意,请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了,本以为有很多jQuery插件,没有想到的是,居然没有搜到好用的,咋办呢,自已动手丰衣足食吧,于是花了一个晚上的时间做出来一个,上效果图:.

jquery Dialog - 弹出窗插件

- Bloger - 博客园-首页原创精华区
    分享几个jquery Dialog弹出窗插件.     1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持. 可用于替换JavaScript原始的“alert” 和“confirmation”对话框. 这个插件使用jQuery Plugin Boilerplate构建.

jQuery 插件autocomplete 应用

- Bloger - 博客园-首页原创精华区
  项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能.   autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件).