2013-11-25 3 views
2

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 및 사파리와 동일한 '깜박임'이 표시됩니다.

답변

1
$(window).bind('hashchange', function (e) { 
    e.preventDefault(); 
    // rest of your code 

hashchange 이벤트의 기본 동작을 방지합니다.
함수에 e 매개 변수도 추가해야합니다.

+0

ahren - 덕분에, 나는 변화를 만들었고 지금은 완전히 무작위적이고 간헐적 인 것처럼 보입니다. 기본적으로 깜박임이 발생하지 않는 시간은 60 %이지만 가끔씩 발생합니다. 깜박임을 유발하는 특정 링크가없는 것 같습니다! 어떤 아이디어? 아니면 우리가 살 필요가있는 기계 상황에서의 유령입니까? – charliek

+0

@charliek - 일부 이전 브라우저 (http://caniuse.com/hashchange)에서는 hashchange 이벤트가 지원되지 않는 것 같습니다. 여기 polyfill 도움이되어야하고 잘하면 당신에게 더 일관된 결과를 제공해야 플러그인있어! http://benalman.com/projects/jquery-hashchange-plugin/ – ahren