Internet Explorer에서 볼 때 다음 페이지의 문제를 조사하기 위해 회사에서 요청했습니다 (확실히 IE9이며 7-10을 적용한다고 가정합니다).ScrollTop 깜박임 - Internet Explorer
페이지의 기본 링크 ('섹션'메뉴 - 음성, 연결성, 클라우드, 모바일 또는 각 섹션 내의 하위 메뉴 중 하나를 클릭 할 때 - & 회선, Hosted VoIP, ISD .. 등) jquery는 Chrome, FF 및 Safari에서 문제없이 작동하는 관련 섹션을 표시하기 위해 실행되지만 IE에서는 ScrollTop 명령을 실행하기 전에 잠시 창을 고정하여 앵커 태그를 깜박입니다.
자바 스크립트 코드 샘플은 아래에 제공되지만 도움이 될 것입니다.
//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을 호출 클릭 기능 사이에 충돌이 될 줄 알았는데 문제를 해결하면 크롬, FF 및 사파리와 동일한 '깜박임'이 표시됩니다.
ahren - 덕분에, 나는 변화를 만들었고 지금은 완전히 무작위적이고 간헐적 인 것처럼 보입니다. 기본적으로 깜박임이 발생하지 않는 시간은 60 %이지만 가끔씩 발생합니다. 깜박임을 유발하는 특정 링크가없는 것 같습니다! 어떤 아이디어? 아니면 우리가 살 필요가있는 기계 상황에서의 유령입니까? – charliek
@charliek - 일부 이전 브라우저 (http://caniuse.com/hashchange)에서는 hashchange 이벤트가 지원되지 않는 것 같습니다. 여기 polyfill 도움이되어야하고 잘하면 당신에게 더 일관된 결과를 제공해야 플러그인있어! http://benalman.com/projects/jquery-hashchange-plugin/ – ahren