2013-11-25 3 views
2

Меня попросила моя компания исследовать проблему на следующей странице http://waxy.cloudtelephones.co.uk/departments/#voice при просмотре в Internet Explorer (определенно IE9, и я полагаю, что это повлияет на 7-10).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
$(window).bind('hashchange', function (e) { 
    e.preventDefault(); 
    // rest of your code 

Предотвратить действие по умолчанию hashchange события.
Не забудьте также добавить параметр e.

+0

ahren - спасибо за это, я внес изменения, и поведение теперь кажется совершенно случайным и прерывистым. В основном 60% случаев мерцания не произойдет, но иногда это произойдет. Кажется, что нет какой-то конкретной ссылки, причиной которой является мерцание! Есть идеи? Или это призрак в машинной ситуации, с которым нам придется жить? – charliek

+0

@charliek - Кажется, событие hashchange не поддерживается в некоторых старых браузерах (http://caniuse.com/hashchange). Здесь есть плагин, который должен помогать заполнять его и, надеюсь, дать вам более последовательные результаты! http://benalman.com/projects/jquery-hashchange-plugin/ – ahren

Смежные вопросы