[Html JS] jQuery锚点跳转及相关操作 IE10 11 下兼容性问题

最新推荐文章于 2021-06-17 09:34:23 发布

原创最新推荐文章于 2021-06-17 09:34:23 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #jquery #html #ie 10

html&js&jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种针对Internet Explorer 10和11浏览器中锚点失效问题的解决方案。通过判断浏览器版本，并在页面加载完成后手动调整滚动条位置，确保锚点功能正常工作。

最近工作上遇到的问题。就是这个　锚点就不多说了，如下解释。主要问题是我在chrome，火狐，ie8下都ok的。NTC测试，报了个bug，说IE10.11就不行了。
这里写图片描述
主要是这个页面分三个frame，我试了下一些常规的办法就不work。

思路：在加载页面，比如help这个页面。判断如果是IE10.11则，在页面初始化后再加载一个函数。这个函数在根据url的锚点在跳转到相应位置。
因为在初始化时候页面的url链接已经处理了。类似http://192.168.1.1/help.htm#LEDID

function set_help_idForIE1011() {
    var tmp = checkIEVersion();//获取IE版本信息
    if(tmp >= 10)
    {
        var url = window.location.toString();//获取当前页面的url http://192.168.1.1/help.htm#LEDID
        var id = url.split("#")[1];//得到LEDID
        if (id) 
        {
            var t = $("#" + id).offset().top;
            $(window).scrollTop(t);//跳转到LEDID处
        }
    }

}

IE版本如何获取，看这里：
[Html JS] 判断IE的版本
这样就解决IE10.11下锚点失效的问题。

锚点
html 锚点到底是干吗的？
通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。
代码：

<a href="#001">跳到001</a>

...文字省略
<a name="001" id="001" ></a>
...文字省略

其实锚点只需name就可以可，加id是为了让它兼容性更好.
href的值要跟name \ i d 一致，前面必须加”#”，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。
因为我们锚点的值为空，为不影响美观我们加个空格就行了,

如以下代码，就可以兼容ie8
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略

另一问题，想显示某页面(如：123.html)的某锚点内容呢？

代码如下
<a href="123.html#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略

来自

//For IE 10.11 Help content location problem  start add by leo
var IEVersion;
function check_browser_version() {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

    if (Sys.ie)
    {
        //document.write('IE: ' + Sys.ie);
        IEVersion =parseInt(Sys.ie);
        //alert(IEVersion);
    }
    else
    {
        IEVersion = -1; //-1 is not ie browser
    }

/*  
    if (Sys.firefox) 
    {
        //document.write('Firefox: ' + Sys.firefox);
    }
    if (Sys.chrome) 
    {
        //document.write('Chrome: ' + Sys.chrome);
    }
    if (Sys.opera) 
    {
        //document.write('Opera: ' + Sys.opera);
    }
    if (Sys.safari) 
    {
        //document.write('Safari: ' + Sys.safari);
    }
*/
    return IEVersion;
}


/*
this function just set help page content location for ie10,11. 
it only works in browser IE 10,11  
*/
function set_help_idForIE1011() {
    //var tmp = checkIEVersion(); 
    var tmp = check_browser_version(); 
    //alert(tmp);
    if(tmp >= 10)
    {
        var url = window.location.toString();
        //alert(url);
        var id = url.split("#")[1];
        //alert(id);
        if (id) 
        {
            var t = $("#" + id).offset().top;
            $(window).scrollTop(t);
        }
    }
}
//For IE 10.11 Help content location problem  end