Меня попросила моя компания исследовать проблему на следующей странице 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!
ahren - спасибо за это, я внес изменения, и поведение теперь кажется совершенно случайным и прерывистым. В основном 60% случаев мерцания не произойдет, но иногда это произойдет. Кажется, что нет какой-то конкретной ссылки, причиной которой является мерцание! Есть идеи? Или это призрак в машинной ситуации, с которым нам придется жить? – charliek
@charliek - Кажется, событие hashchange не поддерживается в некоторых старых браузерах (http://caniuse.com/hashchange). Здесь есть плагин, который должен помогать заполнять его и, надеюсь, дать вам более последовательные результаты! http://benalman.com/projects/jquery-hashchange-plugin/ – ahren