利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari

最新推荐文章于 2023-03-30 23:35:36 发布

GiantChan

最新推荐文章于 2023-03-30 23:35:36 发布

阅读量4.9k

点赞数

分类专栏： web前端文章标签： anchor 锚点 scrollTo 模拟锚点 iframe

本文链接：https://blog.csdn.net/killzero/article/details/17435169

版权

web前端专栏收录该内容

46 篇文章 1 订阅

订阅专栏

如题。

在网页开发的过程中，锚点可以实现页面快速定位。

《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方法滑动到对应的位置上去。参考的链接：http://blog.csdn.net/zlxzlxzlxzlxzlx/article/details/8504571

经过这篇文章以及高手同学的教导，我们可以通过js来模拟锚点穿越iframe到达内页，从而躲避开IE和firefox对锚点的兼容问题，同时实现更加流畅的页面滚动切换效果。

父级页面中一个导航条导航菜单结构：

<a class="brand" href="javascript:void(0)"  target="carMainBox" οnclick="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来返回到原始的位置，且效果非常棒。