关于锚点跳转及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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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之变量、常量学习笔记
2008/03/27 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
php-msf源码详解
2017/12/25 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
python中二维阵列的变换实例
2014/10/09 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python中Yield的基本用法
2020/10/18 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
八年级语文教学反思
2014/02/11 职场文书
艺术节主持词
2014/04/02 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
六查六看剖析材料
2014/10/06 职场文书
培训通知书模板
2015/04/17 职场文书
公司文体活动总结
2015/05/07 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书