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


Posted in Javascript onOctober 01, 2012

一、锚点跳转简介

锚点嘛,业余点的解释就是可以让页面定位到某个位置的点。在高度较高的页面中经常见到,例如,百度百科页面,《火影忍者》这个词条,结果就会看到如下的锚点列表:

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

点击其中一个链接,就会跳转到页面的相应位置。这就是锚点的作用之一。锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处。

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

起关键作用的就是链接地址后面跟着的#comments,见下图标示:

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

我知道的实现锚点跳转有两种方式,一种是a标签+name属性,还有一种就是使用标签的id属性。百度百科就是使用的a标签的name属性实现锚点跳转的,见下图:

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

上图效果更具体点表示是:

<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地址末尾带有”#”标识符,这就相当于告诉浏览器:“哥,小妹要跳了,你要接好我哦!关于锚点跳转及jQuery下相关操作与插件”。由于”#”后面跟着的是0,所以呢,浏览器就会在地址为http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html的页面上寻找符合”#0″特点的标签,并执行跳转。在此页面上,有个js动态创建的渐变背景,从上到下有256个标签,id从0~255,我们看下firebug下的html代码展示。

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

所以,这个页面载入后,应该立即跳转到渐变背景的顶部。如下图所示:

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

您可以狠狠地点击这里:“#0″锚点的跳转测试

2. 关于空锚点指向
如果URL中”#”后面跟随的字符id在文中找不到,那么会如何呢?如果是在当前页面,则页面没有跳转,唯一变化的就是URL地址;如果是从其他页面跳转过来,则页面顶部显示,”#”基本上就是聋子的耳朵——摆设。

您可以狠狠地点击这里:空锚点页面跳转测试,这里的锚点标示是”#aaa”,但是由于页面上没有id为”aaa”的标签或是name为”aaa”的a标签,所以,”#aaa”纯粹就是个打酱油的。

再如果,页面的URL后面只有一个孤单的”#”,或是页面某链接指向单单是个”#”(<a href=”#”></a>),则页面顶部显示。所以,一般页面的回到顶部效果都是使用一个孤单的”#”作为锚点链接的。例如淘宝网的返回首页:

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

对应的html代码如下图所示:

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

三、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

点击下图所示文字链接,就可以看到平滑跳转效果了:

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

相应的代码如下:

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,现在,我们把页面滚动到顶部,如下图所示:

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

此时,我们再按下浏览器刷新按钮(或是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的文字链接或是按钮,均有跳转效果。
关于锚点跳转及jQuery下相关操作与插件

参数

参数 默认 解释ieFreshFixtrue布尔型,默认修复IE下刷新锚点不起作用的问题anchorSmoothtrue布尔型,默认平滑跳转anchortaganchor字符串,用以绑定id的标签属性,默认是"anchor",属于自定义属性animateTime1000整数,动画执行的时间,如果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地址。

六、结语

时间仓促,资历有限,若有有表述错误,欢迎指正。就这些。希望能对有需要的人提供一些帮助。

Javascript 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
原生js实现回复评论功能
Jan 18 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
浅谈React Event实现原理
Sep 20 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
仿新浪微博返回顶部的jquery实现代码
Oct 01 #Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 #Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 #Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 #Javascript
js 手机号码合法性验证代码集合
Sep 29 #Javascript
JavaScript模板入门介绍
Sep 26 #Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 #Javascript
You might like
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
详细探究Python中的字典容器
2015/04/14 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python中的id()函数指的什么
2017/10/17 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
武汉高蓝德国际.net机试
2016/06/24 面试题
三年级科学教学反思
2014/01/29 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
绿色学校实施方案
2014/03/31 职场文书
生日庆典策划方案
2014/06/02 职场文书
面试感谢信范文
2015/01/22 职场文书
公司庆典欢迎词
2015/01/26 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2015年公路养护工作总结
2015/05/13 职场文书