利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari
2013-12-20 18:23
1121 查看
如题。
在网页开发的过程中,锚点可以实现页面快速定位。
《1》
常见的情况,是同一个页面内导航和锚点的配合,但是跳转时是直接切换,效果生硬。
《2》
不同页面间的跳转,涉及到跳转后定位到设定的页面的锚点,可以使用URL传参实现。具体实现方法如下:
在导航栏中设定好跳转到的页面的链接,”#“后面就是我们在A.html中预先定义好的锚点的"name"属性。注意,涉及到锚点兼容性的问题,所以,锚点的命名应该是"id"与”name“都定义,且值相同:
在实际情况中,我遇到更多的情况是如下图所示的页面结构:
在父级页面A.html中存在导航条,页面内嵌套了一个iframe。当用户点击导航栏中的导航按钮时,会改变iframe的src属性同时刷新iframe的内页,定位到在内页中已经预先定好的锚点位置中去。
一开始,我使用锚点来实现这个功能,在chrome、safari及各个国内的套壳浏览器中均可以实现这个功能。但是到了firefox及IE下面,这个功能就失效了。通过分析,在firefox中,firefox禁止在iframe中进行锚点的切换。网上有解决这个问题的js现成代码,基本的思想是获取锚点距离显示器顶部高度,通过Jquery的scrollTo方法滑动到对应的位置上去。参考的链接:/article/11120728.html
经过这篇文章以及高手同学的教导,我们可以通过js来模拟锚点穿越iframe到达内页,从而躲避开IE和firefox对锚点的兼容问题,同时实现更加流畅的页面滚动切换效果。
父级页面中一个导航条导航菜单结构:
在需要使用到这个方法的页面添加如下js函数:
http://gd.qq.com/zt2013/gyh_shouye/index.htm
srollTo函数作用很多,在页面切换之后,一般都会回复初始状态,我们可以使用srcollTo来返回到原始的位置,且效果非常棒。
在网页开发的过程中,锚点可以实现页面快速定位。
《1》
常见的情况,是同一个页面内导航和锚点的配合,但是跳转时是直接切换,效果生硬。
《2》
不同页面间的跳转,涉及到跳转后定位到设定的页面的锚点,可以使用URL传参实现。具体实现方法如下:
在导航栏中设定好跳转到的页面的链接,”#“后面就是我们在A.html中预先定义好的锚点的"name"属性。注意,涉及到锚点兼容性的问题,所以,锚点的命名应该是"id"与”name“都定义,且值相同:
<a href="A.html#anchor"></a>《3》
在实际情况中,我遇到更多的情况是如下图所示的页面结构:
在父级页面A.html中存在导航条,页面内嵌套了一个iframe。当用户点击导航栏中的导航按钮时,会改变iframe的src属性同时刷新iframe的内页,定位到在内页中已经预先定好的锚点位置中去。
一开始,我使用锚点来实现这个功能,在chrome、safari及各个国内的套壳浏览器中均可以实现这个功能。但是到了firefox及IE下面,这个功能就失效了。通过分析,在firefox中,firefox禁止在iframe中进行锚点的切换。网上有解决这个问题的js现成代码,基本的思想是获取锚点距离显示器顶部高度,通过Jquery的scrollTo方法滑动到对应的位置上去。参考的链接:/article/11120728.html
经过这篇文章以及高手同学的教导,我们可以通过js来模拟锚点穿越iframe到达内页,从而躲避开IE和firefox对锚点的兼容问题,同时实现更加流畅的页面滚动切换效果。
父级页面中一个导航条导航菜单结构:
<a class="brand" href="javascript:void(0)" target="carMainBox" onclick="getAndFocus('audi')"><!--audi--> <div class="audi"></div> <p>奥迪</p> </a>其中函数getAndFocus('audi')就是控制穿越到iframe内部的切换函数,其中最主要是穿越iframe,获取到锚点的高度,使用scrollTo函数模拟,函数如下:
<script> function getAndFocus(brand){ //获取父级页面中iframe的子页 var iframeBox = document.getElementById("carMainBox").contentWindow; //获取子页面中的类名为‘sbrand’第一个锚点位置 var point = iframeBox.document.getElementsByClassName("s"+brand); //如果子页中没有定义这个品牌的锚点 if(point[0] == null ) alert("您所选择的品牌暂无活动车型,敬请期待!"); //如果子页定义了这个锚点 else{ //变换导航条选中样式 var ul = document.getElementById("left-nav"); var newLiSelected = document.getElementById(brand); var OldLiSelected = document.getElementsByClassName("c-selected"); if(OldLiSelected[0]){ OldLiSelected[0].className = "c-unselected"; } newLiSelected.className = "c-selected"; for(var i=0;i<=point.length;i++){ if(point[i].style.display =="block"){ var height = $(point[i]).offset().top+800;//关键点,获取所预先定义的元素的offset,再加上iframe距离顶部的高度 $.scrollTo(height, 300);//jquery函数,scrollTo(高度,速度)。这样子就可以实现跨越iframe完美实现锚点了。 return true; } if(i==point.length-1){ alert("您所选择的品牌暂无该价位的车型"); } } } } </script>这样子操作的好处,就是基本兼容主流的浏览器。但是,这个方法有又引出了一个兼容性的问题,即IE不支持getElementsByClassName()这个方法。这个容易操作。我们可以通过JS来模拟这个函数,当然也可以使用jquery的类名选择器:
在需要使用到这个方法的页面添加如下js函数:
//解决getElementById在IE下失效的函数 function getElementsByClassName(classname){ var d=document; var e=d.getElementsByTagName('*'); var c=new RegExp('\\b'+classname+'\\b'); var r=[]; for(var i=0,l=e.length;i<l;i++){ var cn=e[i].className; if(c.test(cn)){ r.push(e[i]); } } return r; }//如果是IE浏览器 if(typeof document.getElementsByClassName !='function'){ document.getElementsByClassName=getElementsByClassName; }//如果浏览器本身支持该方法,则默认使用原方法添加了这些之后就能够完全支持使用js模拟锚点效果,穿透iframe。且这种方法完美支持各种主流浏览器。这是实现之后页面的效果:
http://gd.qq.com/zt2013/gyh_shouye/index.htm
srollTo函数作用很多,在页面切换之后,一般都会回复初始状态,我们可以使用srcollTo来返回到原始的位置,且效果非常棒。
相关文章推荐
- 利用AJAX,得到XML和JSON信息,不用JQuery等UI框架,兼容 IE、Firefox、Chrome、Safari、Opera 等浏览器。
- JS实现 兼容IE,Firefox,Chrome 的圆形放大镜效果
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- BX2001: IE 支持使用 window.clipboardData 访问系统剪贴板,Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现,Firefox 和 Opera 不支持这类对象
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- 为何firefox不支持insertRow和insertCell。我如何能让firefox显示和ie显示的效果一样?iframe实现高度自适应,兼容FF、Opera、Safari
- css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式
- 兼容IE、新版Chrome、Firefox,实现本地图片等比例缩放预览
- 实现页面滑动到一定位置后弹出图片(兼容IE9/10/11,chrome,firefox,safari)
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
- onbeforeunload事件中调用Ajax实现用户注销操作(兼容IE、Firefox、Chrome)
- js实现鼠标右键自定义菜单(弹出层),并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)
- CSS半透明度设置,兼容Firefox, IE, Chrome, Opera and Safari
- jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
- CSS半透明度设置,兼容Firefox, IE, Chrome, Opera and Safari
- JavaScript获取鼠标坐标的函数(兼容IE、FireFox、Chrome)