CODEWITHSUNDEEP
javascriptjqueryinternet-explorerscrolltop
charliek
charliek

Reputation: 121

ScrollTop flicker - Internet Explorer

I've been asked by my company to investigate an issue on the follow page http://waxy.cloudtelephones.co.uk/departments/#voice when being viewed in Internet Explorer (definitely IE9 and I presume it'll effect 7-10).

The problem is as follows - when clicking any of the main links on the page (the 'section' menu - Voice, Connectivity, Cloud, Mobile or the sub menus within each section - Calls & Lines, Hosted VoIP, ISD.., etc) jquery is fired to display the relevant section, in Chrome, FF and Safari everything works without a problem, however in IE the window momentarily flickers to anchor tag before the ScrollTop command is run.

Javascript code samples are provided below, any help would be much appreciated.

//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;
});

One last thing - I thought the problem might be a conflict between the two hash events (load and change) as well as the click function all calling scrollTop however I've tried completely removing the click function and instead of solving the problem it makes the same 'flicker' appear in Chrome, FF and Safari!

Upvotes: 2

Views: 839

Answers (1)

ahren
ahren

Reputation: 16959

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

Prevent the default action of the hashchange event.
Remember to add the e parameter to the function also.

Upvotes: 1

Related Questions