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

2020-05-23 06:25:30易采站长站整理


其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的文字链接或是按钮,均有跳转效果。


参数

参数默认解释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地址。