1

I have some jQuery code that scrolls to the top of an element's parent on click event. This code works great, however, when testing on IE and Firefox, the scroll does not work. Does anyone know of a solution for this functionality to work with IE and Firefox? 

$(".character-img").click(function(){
   $('body').animate({scrollTop: $(this).parent().offset().top});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>

<div class="character">
    <img class="character-img" src="https://unsplash.it/200/300" /> 
    <div class="content">
        
    </div>
</div>
EricBellDesigns
  • 955
  • 1
  • 9
  • 33

1 Answers1

2

It's a known problem, Firefox will only accept scrollTop when both body and html are declared.

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

is the correct way to write this.

See Animate scrollTop not working in firefox

Community
  • 1
  • 1
Steyn
  • 1,311
  • 8
  • 15