锚定标记在Chrome中不起作用 [英] Anchor Tags not working in Chrome

问题描述

我在脚本中使用了锚标签，因此当我回到页面时，我可以保存我所处的位置。问题是只有当我点击链接时才有效。当我刷新页面，或者回到它时，它不会。我没有看到什么？信不信由你...这是Chrome的一个问题 - 它实际上在IE中运行正常!!!（我简直不敢相信我刚刚说过）

<$ p $ function parseXML（xml）
{
//找到每个类别并打印标题
var output ='';
var ms = 0;
$（xml）.find（category）。each（function（）
{

output + ='< h3>'+ $（this）.find （title）。text（）+'< a name =m'+（ms + 1）+'>< / a>< / h3>';
var div =' < div>;
output + ='< ul>';
$（this）.find（'items> item'）。each（function（）{
var text = $（this）.find（text）。text（）;
var slink = $（this）.find（link）.text（）;
output + =< ; li class ='subLink'src ='+ slink +'>< a href ='＃m+ ms +'>+ text +< / a>< / li>;

））;

output + ='< / ul>';
ms ++;
}）;
var icons = {
header：ui-icon-circle-arrow-e，
activeHeader：ui-icon-circle-arrow-s
};
var hashNum = 0;
if（window.location.hash！=''）{
hashNum = parseInt（window.location.hash.replace（＃m，））;

};
$（'< div>'）
.attr（'id'，'accordionSub'）
.html（输出）
.appendTo（'＃accordionSubB'）。延迟（1）.queue（函数（）{
$（#accordionSub）.accordion（{
heightStyle：content，
可折叠：true，
图标：图标，
活动：hashNum
}）;
}）;


$ / code $ / pre
$ b $输出：



 < h3 class =ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons ui-state-hover 
 role =tabid =ui-accordion-accordionSub-header-22aria-controls =ui-accordion-accordionSub-panel-22
 aria-selected =falsetabindex =  -  1 > 
< span class =ui-accordion-header-icon ui-icon ui-icon-circle-arrow-e>< / span>压力传感器
< a name =m23 >< / A> 
< / h3> 
  




解决方案

找到一个解决方案， （$）



  $（window）.load（function（）{
 var hashNum = 0; 
 if（window。 （）; 
 console.log（'hashNum：'+ hashNum）; $ b（＃）; 
 $ b $ hashNum = window.location.hash.replace（＃m，） $ b $; 
 
 
 hashMenu = $（＃m+ hashNum-1）.offset（）。top; 
 
 $（'html，body '）.animate（{
 scrollTop：hashMenu 
}，1000）; 
 
}）; 
  




I'm using anchor tags in my script so that when I go back to the page I can save the position I was at. The problem is it only works when I click the link. When I refresh the page, or go back to it it doesn't. What am I not seeing? Believe it or not... this is a problem with Chrome - it actually works fine in IE!!!(I can't believe I just said that)

function parseXML(xml)
{
    //find every Category and print the title
    var output = '';    
    var ms = 0;
    $(xml).find("category").each(function()
    {   

        output += '<h3>' +$(this).find("title").text() + '<a name="m' + (ms+1) + '"></a> </h3> ' ;
        var div = '<div>';
        output += '<ul>';   
        $(this).find('items > item').each(function() {
            var text = $(this).find("text").text();
            var slink = $(this).find("link").text();
            output += "<li class='subLink' src='"+ slink + "'><a href='#m"+ms+"'>"  + text + "</a></li>";

        });

        output += '</ul>';      
        ms++;
    });         
    var icons = {
  header: "ui-icon-circle-arrow-e",
  activeHeader: "ui-icon-circle-arrow-s"
};
    var hashNum = 0;
    if (window.location.hash != ''){
        hashNum = parseInt(window.location.hash.replace("#m", "")); 

    };
$('<div>')
.attr('id','accordionSub')
.html(output)       
.appendTo('#accordionSubB').delay(1).queue(function(){
    $( "#accordionSub" ).accordion({
                heightStyle: "content",
                collapsible: true,
                icons: icons,
                active: hashNum
            });
});

}

OUTPUT:

<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons ui-state-hover"
role="tab" id="ui-accordion-accordionSub-header-22" aria-controls="ui-accordion-accordionSub-panel-22"
aria-selected="false" tabindex="-1">
    <span class="ui-accordion-header-icon ui-icon ui-icon-circle-arrow-e"></span>Pressure Transducers
    <a name="m23"></a>
</h3>

解决方案

Found a solution I had to add this:

$(window).load(function(){
    var hashNum = 0;
    if (window.location.hash != ''){
        hashNum = window.location.hash.replace("#m", "");   
        console.log('hashNum: ' + hashNum); 
    };


    hashMenu = $("#m"+hashNum-1).offset().top;

      $('html,body').animate({
          scrollTop: hashMenu
    }, 1000);

    });

这篇关于锚定标记在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！