scrollTop not working on IE11

4.3k views Asked by At

You're right, there are a ton of similar queries on StackOverflow, but after reading/analyzing at least 20, I haven't found the right answer. I verified that my script contained

$('body,html').animate({scrollTop:$(this).offset().top},800);

instead of

$("body").animate({scrollTop:$(this).offset().top},800);

as specified here: scrollTop doesn't work on firefox and IE? to no avail. I've also tried several other modifications that stopped it from working on all browsers.

While the script works flawlessly across everything else I've checked (Chrome, Firefox, Opera), it does not work as expected on Windows 8.1 / IE11. It should hide #featuring_wrap, show #DIV_X and scroll to it. It does everything except the scroll. The sidebars get taller, but it doesn't scroll to the DIV.

I read in another post here that jQuery v1.x was for <= IE8 and v2.x was for >= IE10. Could that be the culprit? I hope not - I already tried using v2.1.1 but everything else on the page stopped working (slider, other hide/show functionality).

Here are two versions of the script. The first is what I am using. There is no difference when I use the second version.

$(document).ready(function(){
  $("#featured-product-nav a").click(function(){
    $("#featuring_wrap").hide();
      var id = $(this).attr('id');
      id = id.split('_');
      $("#divs_container > div").removeClass("active");
      $("#divs_container > #div_"+id[1]).addClass("active");
      $("#divs_container > div:not(.active)").slideUp();
      $("#divs_container > div.active").slideToggle(function(){
         $('body,html #divs_container > #div_"+id[1]').animate({
            scrollTop: $("#div_"+id[1]).offset().top
         }, 800);
      });
   });

   return false
});


$(document).ready(function(){
 $("#featured-product-nav a").click(function(){
    $("#featuring_wrap").hide();
    var id =  $(this).attr('id');
    id = id.split('_');
    $("#divs_container div").removeClass("active");
    $("#divs_container #div_"+id[1]).addClass("active");
    $("#divs_container div:not(.active)").slideUp();
    if($("#divs_container #div_"+id[1]).hasClass("open")){
       $("#divs_container #div_"+id[1]).removeClass("open").slideUp();
    }

   else{
       $("#divs_container .open").slideUp().removeClass("open");
       $("#divs_container #div_"+id[1]).addClass("open").slideDown();
       $('body,html #divs_container #div_"+id[1]').animate({
          scrollTop: $("#div_"+id[1]).offset().top
       }, 800);
   }
 });
});

Live code here: http://www.healthfirst.com/dental-waste/Sharps-Recovery-Dental/index.html

Any suggestions?

0

There are 0 answers