0

I have a 'gototop' button. When the user clicks on the button the page will scroll up. It works fine in Safari and Chrome, but not working on Firefox. I think have enabled JavaScript in Firefox. Not sure why it is not working.

$(document).ready(function(){ 
     $(window).scroll (function(){
     if($(this).scrollTop()>90) {
       $('.goToTop').fadeIn(); }
     else{
       $('.goToTop').fadeOut(); 
    }
  });

  var goToTop = document.getElementsByClassName("goToTop")[0];

  goToTop.onclick = function(){  
    $('body').animate({scrollTop:0},600); 
  };
})
body {
  height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://placehold.it/45x45?text=^" class='goToTop' style="background: #fff url({{ 'back-to-top.png' | asset_url }}) no-repeat ;  
  bottom:1px;display:block;opacity:.8; border-radius: 20px;position:fixed;right:1em;height:45px;width:45px; z-index:999"> 
  <div class="sixteen columns page">
     {{ page.content }}   
 </div>
BSMP
  • 4,596
  • 8
  • 33
  • 44
user21
  • 1,261
  • 5
  • 20
  • 41

1 Answers1

2

Animate both body and html.

$('body, html').animate({scrollTop:0},600);
Derek
  • 3,438
  • 1
  • 17
  • 35