3

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?

Community
  • 1
  • 1
KillerDesigner
  • 485
  • 1
  • 6
  • 18
  • 2
    Fail! Tested in IE11. No problemo chiefo. –  Nov 12 '14 at 00:00
  • Thanks for checking guys. That's wild. While it hides the first DIV, and shows the target DIV, it is not scrolling to that DIV, on three different Windows8.1/IE11 systems I have access to. Interesting. – KillerDesigner Nov 12 '14 at 16:10
  • same problem, did you manage to solve it? – ClassyPimp Dec 21 '16 at 09:09
  • @ClassyPimp - Sorry for the delay - I was traveling abroad. No, I don't believe I did solve it, and opted for an alternative layout. – KillerDesigner Jan 03 '17 at 18:39
  • if a div is closing while one is opening you may need to do a setTimeout function for when your first div has finished closing – BritishSam Sep 25 '17 at 11:55

0 Answers0