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

一、主播跳转主播介绍，业余点的解释是允许页面位于某个位置的点。经常在高空页面看到，比如百度百科页面，词条《火影忍者》，会发现下面的主播列表：。

点击其中一个链接，你会跳到页面上相应的位置。这是锚点的功能之一。锚点也可以用来跳转到其他页面，比如我的博客。在博客首页点击文章下方的评论链接，会跳转到文章的评论。

起关键作用的是#comments后跟链接地址，如下图所示：。

我知道实现跳锚有两种方式，一种是A标签的名称属性，另一种是使用标签的id属性。百度百科利用A标签的名称属性实现跳锚，如下图：。

上图的效果更具体：a href='#2 '作者简介/a a name='2'/a早在大学与无名氏互动的时候，我就已经放弃了使用一个名字的锚定方法。一是使用空标签，涉嫌铺张浪费、挪用公款；二是经常发生锚定失效。所以，我总是用id绑定锚点。到目前为止，没有任何错误。如果是用id实现的，上图所示效果对应的代码应该类似如下：a href='#2 '作者简介/a h2 id='2 '作者简介/h2说明：本文下面所有锚点都是指id锚点。作者：张新旭，欢迎访问我的个人网站。2.带有锚点跳转1的网址。关于“#”在制页中，符号“#”比较常见，具有一定的普遍性。基本上，它的意思是id选择器。例如，在CSS中，#header{}表示id为header的标签的样式如何；在jQuery中，$(“# header”)表示选择id为header的jQuery对象；同样，在页面的URL中，“#”也可以理解为一个id选择器，即页面跳转到包含URL指向的id的标签。比如我们在浏览器地址栏输入或复制以下网址：http://www . Zhang xinxu.com/study/201007/anchor-jump-test-1-demo . html # 0由于网址末尾有“#”标识，相当于告诉浏览器：“兄妹要跳了，你得来接我。

"。由于“#”后面跟“# 0”，浏览器会在地址为http://www . Zhang xinxu.com/study/201007/anchor-jump-test-1-demo . html的页面上查找符合“# 0”特征的标签，并执行跳转。在这个页面上，有一个由js动态创建的渐变背景，从上到下有256个标签，id从0到255。让我们看看firebug下的html代码显示。

因此，当加载此页面时，它应该立即跳到渐变背景的顶部。如下图所示：

你可以狠狠地点击这里：“# 0”主播跳台测试2。关于空锚点如果在文本中找不到网址中“#”后面的字符标识会发生什么？如果是在当前页面，页面不跳转，唯一变化的就是URL地址；如果从其他页面跳转，页面顶部显示“#”基本就是聋子耳朵——。你可以狠狠地点击这里：空主播跳页测试，其中主播被标记为“#aaa”，但由于页面上没有id为“aaa”的标签，也没有名为“aaa”的A标签，“#aaa”纯粹是个打酱油的。然后，如果页面的URL后面只有一个孤独的“#”，或者页面上的一个链接指向一个单独的“#”(a href=" # "/a)，它就会显示在页面的顶部。因此，孤独的“#”通常被用作页面背靠背效果的锚定链接。比如淘宝的退货首页：。

对应的html代码如下图所示：。

3.jQuery下锚点的平滑跳转。我认为我们应该谨慎使用锚点的平滑跳跃。它可以在个人网站上使用，或者当效果包含功能提示时使用。在一般的商业网站上，权衡一下不是更好。当然，这只是我个人的看法。jQuery库为我们做了大量的工作，在jQuery下很容易实现锚点的平滑跳转。例如，如果我们希望页面平滑地滚动到id为box的元素，jQuery代码只需要一句话，如下所示：$ ('html，body ')。动画({scrolltop: $ ('# box ')。偏移量()。top}，1000)；其中，animate是jQuery的自定义动画方法，$(“# box”)。偏移量()。top表示从页面顶部开始，id为box的jQuery对象的偏移量值，1000表示平滑动画的执行时间为1000毫秒，即1秒。为了直观的展示，我做了一个简单的演示页面。可以用力点击这里：主播平滑跳转演示点击下图所示的文字链接，可以看到平滑跳转效果：。

对应的代码如下：HTML Div id=' top ' class=' append _ boxmb 20 '平滑跳转到底部：a href='#bottom' class='smooth '滑到底部/a/Div Div id=' append box ' class=' append _ box ' img width=' 300 ' height=' 3281 ' src=' http 3360http://ss4 . sinaimg.cn/b middle/6200 B7 A8 t8 b 67434806066光滑’)。单击(function () {var href=$ (this))。attr(。var pos=$(href)。偏移量()。顶部；$('html，body ')。动画({scrollTop: pos}，1000)；返回false});四.IE下锚点刷新失败，jQuery 1下解决方案。锚点刷新失败所谓“锚点刷新失败”是指当我们再次刷新页面时(F5)，即使此时的URL后面跟着一个锚点，该锚点也不会工作。先举最初的例子演示一下，我们可以在浏览器的地址栏输入或者复制下面的网址：http://www . Zhang xinxu.com/study/201007/anchor-jump-test-1-demo . html # 0，或者点击这里。当我们第一次进入这个页面时，锚点是正常的，页面位于渐变背景的顶部。好了，现在让我们把页面滚动到顶部，如下图所示：。

此时，我们再次按下浏览器刷新按钮(或F5)，可以看到在IE浏览器下，页面仍然显示在顶部，这意味着页面的锚点(#0)不再工作。大多数情况下，可能对我们影响不大，但有时候，比如我们在论坛发帖，发帖页面和帖子列表页面是同一个页面。帖子提交后，我们要将页面定位到刚发布的帖子，这是在IE浏览器下修改URL和添加锚点无法实现的。IE浏览器即使刷新同一个URL也能实现锚点定位怎么办？在jQuery下，实现起来并不难。我们可以根据URL得到锚点，从而进一步得到对应的锚点对象，然后让页面的滚动高度为离页面顶部的偏移值。无论多么精彩的文字，都不如例子直观。比如我们要处理一个链接地址为http://www . Zhang xinxu.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)。偏移量()。顶部；$(窗口)。scroll top(t)；}});你可以狠狠地点击这里：在IE浏览器下刷新锚点故障修复演示V. jQuery任意标签锚点跳转插件上面提到的所有锚点跳转都是通过加载页面或者链接A标签来启动的。其实我们可以点击任意标签，实现锚点的跳转。为此，我专门编写了一个简单的jQuery插件，实现任意标签页上任意位置的锚点跳转(平滑)。可以狠狠地点击这里进行演示下载：在任意标签锚点跳转到演示：jquery.anchor.1.0.js 1015字节【右键-目标|保存链接为】，点击演示的文字链接或按钮，会有跳转效果。

参数默认解释为ieFreshFixtrue boolean，默认解释为anchorSmoothtrue boolean，默认平滑跳过anchortaganchor字符串，用于绑定id的标记属性。默认为‘anchor’，属于用户自定义属性animateTime1000的整数，动画执行时间。如果anchorSmooth为false，则该参数无效。使用这个插件的方法是：zxxAnchor(。如果一个插件想用，需要设置一些触发跳锚的标签。默认情况下，标签中会添加一个用户定义的属性锚点，例如：button id=' BTN top ' type=' button ' anchor=' top ' Click on me/button，添加一个用户定义的锚点属性，属性值为“top”，表示页面跳转到ID为top的元素。此时，只需直接调用zxxAnchor方法，如下所示：$('#btnTop ')。zxxAnchor()；当然，我们不需要使用默认的锚点标签。例如，我们可以使用A标记的href属性，只要在绑定zxxAnchor方法时修改参数即可。例如，a href='#bottom' class='smooth '滑到底部/a的jQuery代码如下：$()。光滑’)。zxx锚({anchortag3333。根据上面的参数表，上面的代码将绑定锚点对象的属性设置为从默认的“锚点”更改为“href”。基本上就是这样。其他参数可以参考上面的参数表，这里就不多说了。优点：插件支持任意标签，任意位置跳锚，平滑效果。同时不改变页面的网址。不及物动词结论：时间短，资质有限。如有错误，请指正。就这样。希望能给有需要的人提供一些帮助。