2013-11-25 44 views
2

當我在Internet Explorer中查看時(我肯定IE9和我認爲它會影響7-10),我的公司已被我的公司要求調查下一頁http://waxy.cloudtelephones.co.uk/departments/#voice的問題。ScrollTop閃爍 - Internet Explorer

問題如下 - 單擊頁面上的任何主鏈接('節'菜單 - 語音,連接,雲,移動或每個部分中的子菜單 - 呼叫&線路,託管VoIP,ISD ..等)jquery被激活來顯示相關部分,在Chrome,FF和Safari中都沒有問題,但是在IE中,ScrollTop命令運行之前,窗口瞬間閃爍錨定標籤。

Javascript代碼示例如下,任何幫助將不勝感激。

//hash control 
if(window.location.hash) { 
    var hash = window.location.hash.substring(1); 
    var selected = "." + hash; 
    var parents = [ "voice", "mobile", "cloud-services", "connectivity"]; 
if ($.inArray(hash, parents) != -1) { 
    $('html, body').animate({"scrollTop":"0"}); 
    $(selected).show(); 
    $('#buttom-nav ul li#' + hash).addClass('selected'); 
    $(selected + " aside.sub-menu").slideDown('slow'); 
    $(selected + " .child-menu li:first").addClass('selected'); 
     $(selected + " .child-page:first").delay(1000).fadeIn('slow'); 
}; 
if ($.inArray(hash, parents) == -1) { 
    var parent = $(selected).closest('.dptmnts').attr('class').split(' ')[2]; 
    $('html, body').animate({"scrollTop":"0"}); 
    $(selected).closest('.dptmnts').show(); 
    $('.child-menu li#' + hash).addClass('selected'); 
    $('#buttom-nav ul li#' + parent).addClass('selected'); 
    $(selected).siblings('aside.sub-menu').slideDown('slow'); 
     $(selected).fadeIn('slow').delay(1000).fadeIn('slow'); 
}; 
}; 

    //hash change control 
$(window).bind('hashchange', function() { 
    var hash = window.location.hash.substring(1); 
var selected = "." + hash; 
var parents = [ "voice", "mobile", "cloud-services", "connectivity"]; 
if ($.inArray(hash, parents) != -1) { 
    $(document).scrollTop(0); 
    $("aside.sub-menu:visible").slideUp('fast'); 
    $(".child-page:visible").fadeOut('fast'); 
    $(".dptmnts:visible").delay(1000).hide('fast'); 
    $('#buttom-nav ul li').removeClass('selected'); 
    $('.child-menu li').removeClass('selected'); 
    $('.child-menu li#' + hash).addClass('selected'); 
    $(selected).fadeIn('fast'); 
    $('#buttom-nav ul li#' + hash).addClass('selected'); 
    $(selected + " aside.sub-menu").delay(500).slideDown('slow'); 
    $(selected + " .child-menu li:first").addClass('selected'); 
     $(selected + " .child-page:first").delay(500).fadeIn('slow'); 
}; 
if ($.inArray(hash, parents) == -1) { 
    var parent = $(selected).closest('.dptmnts').attr('class').split(' ')[2]; 
    $(document).scrollTop(0); 
    $(".child-page:visible").fadeOut('fast'); 
    $('.child-menu li').removeClass('selected'); 
    $('.child-menu li#' + hash).addClass('selected'); 
     $(selected).delay(500).fadeIn('slow'); 
}; 
}); 

$(".page-departments #content a").not('.pop-up').click(function(event) { 
event.preventDefault() 
window.location.hash = this.hash; 
$(document).scrollTop(0); 
return false; 
}); 

最後一件事 - 我想這個問題可能是兩個散列事件(負載變化)以及點擊功能調用所有然而scrollTop的我已經試過完全刪除點擊功能,而是發生衝突解決問題,它使Chrome,FF和Safari中出現相同的「閃爍」!

回答

1
​​

防止hashchange事件的默認操作。
還記得將e參數也添加到函數中。

+0

ahren - 謝謝你,我已經改變了,現在的行爲似乎是完全隨機的和間歇性的。基本上60%的時間閃爍不會發生,但偶爾會發生。似乎沒有一個特定的環節引起閃爍或者!有任何想法嗎?或者這是我們將要忍受的機器情況中的一個幽靈? – charliek

+0

@charliek - 一些較舊的瀏覽器(http://caniuse.com/hashchange)似乎並不支持hashchange事件。這裏有一個插件可以幫助填充它,並希望給你更一致的結果! http://benalman.com/projects/jquery-hashchange-plugin/ – ahren