jQuery scrollTop not working in Chrome but working in Firefox

Question

I have used a scrollTop function in jQuery for navigating to top, but strangely 'the smooth animated scroll' stopped working in Safari and Chrome (scrolling without smooth animation) after I made some changes.

But it is still working smoothly in Firefox. What could be wrong?

Here is the jQuery function I used,

jQuery:

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});

HTML

<a id="gotop" href="#">Go Top </a>

CSS

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}

Answer 1

Try using $("html,body").animate({ scrollTop: 0 }, "slow");

This works for me in chrome.

Answer 2

If your CSS html element has the following overflow markup, scrollTop will not function.

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}

Answer 3

It works in both browsers if you use scrollTop() with 'document':

$(document).scrollTop();

...instead of 'html' or 'body'. Other way it won't work at the same time in both browsers.

Answer 4

I have used this with success in Chrome, Firefox, and Safari. Haven't been able to test it in IE yet.

if($(document).scrollTop() !=0){
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}

The reason for the "if" statement is to check if the user is all ready at the top of the site. If so, don't do the animation. That way we don't have to worry so much about screen resolution.

The reason I use $(document).scrollTop instead of ie. $('html,body') is cause Chrome always return 0 for some reason.

Answer 5

I had a same problem with scrolling in chrome. So i removed this lines of codes from my style file.

html{height:100%;}
body{height:100%;}

Now i can play with scroll and it works:

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");

Answer 6

Scroll body and check if it worked:

function getScrollableRoot() {
    var body = document.body;
    var prev = body.scrollTop;
    body.scrollTop++;
    if (body.scrollTop === prev) {
        return document.documentElement;
    } else {
        body.scrollTop--;
        return body;
    }
}


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");

This is more efficient than $("html, body").animate because only one animation used, not two. Thus, only one callback fires, not two.

Answer 7

// if we are not already in top then see if browser needs html or body as selector
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body';

// then proper delegate using on, with following line:
$(obj).animate({ scrollTop: 0 }, "slow");

BUT, best approach is to scroll an id into your viewport using just native api (since you scroll to top anyway this can be just your outer div):

document.getElementById('wrapperIDhere').scrollIntoView(true);

Answer 8

I use:

var $scrollEl = $.browser.mozilla ? $('html') : $('body');

because read jQuery scrollTop not working in Chrome but working in Firefox

Answer 9

maybe you mean top: 0

$('a#gotop').click(function() {
  $("html").animate({ top: 0 }, "slow", function() { 
                                           alert('Animation complete.'); });
  //return false;
});

from animate docs

.animate( properties, [ duration ], [ easing ], [ callback ] )
properties A map of CSS properties that the animation will move toward.
...

or $(window).scrollTop() ?

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});

Answer 10

A better way to solve this problem is to use a function like this:

function scrollToTop(callback, q) {

    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, function() {
            console.log('html scroll');
            callback(q)
        });
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, function() {
            console.log('body scroll');
            callback(q)
        });
        return;
    }

    callback(q);
}

This will work across all browsers and prevents FireFox from scrolling up twice (which is what happens if you use the accepted answer - $("html,body").animate({ scrollTop: 0 }, "slow");).

Answer 11

Testing on Chrome, Firefox and Edge, the only solution that worked fine for me is using setTimeout with the solution of Aaron in this way:

setTimeout( function () {
    $('body, html').stop().animate({ scrollTop: 0 }, 100);
}, 500);

No one of the other solutions resetted the previuos scrollTop, when I reloaded the page, in Chrome and Edge for me. Unfortunately there is still a little "flick" in Edge.

Answer 12

So I was having this problem too and I have written this function:

/***Working function for ajax loading Start*****************/
function fuweco_loadMoreContent(elmId/*element ID without #*/,ajaxLink/*php file path*/,postParameterObject/*post parameters list as JS object with properties (new Object())*/,tillElementEnd/*point of scroll when must be started loading from AJAX*/){
 var 
  contener = $("#"+elmId),
  contenerJS = document.getElementById(elmId);
 if(contener.length !== 0){
  var 
   elmFullHeight = 
    contener.height()+
    parseInt(contener.css("padding-top").slice(0,-2))+
    parseInt(contener.css("padding-bottom").slice(0,-2)),
   SC_scrollTop = contenerJS.scrollTop,
   SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight;
  if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){
   $("#"+elmId).unbind("scroll");
   $.post(ajaxLink,postParameterObject)
    .done(function(data){
     if(data.length != 0){
     $("#"+elmId).append(data);
     $("#"+elmId).scroll(function (){
      fuweco_reloaderMore(elmId,ajaxLink,postParameterObject);
     });
    }
    });
  }
 }
}
/***Working function for ajax loading End*******************/
/***Sample function Start***********************************/
function reloaderMore(elementId) {
 var
  contener = $("#"+elementId),
  contenerJS = document.getElementById(elementId)
 ;

    if(contener.length !== 0){
     var
   elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))),
   SC_scrollTop = contenerJS.scrollTop,
   SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight
  ;
  if(SC_scrollTop >= SC_max_scrollHeight - 200){
   $("#"+elementId).unbind("scroll");
   $("#"+elementId).append('<div id="elm1" style="margin-bottom:15px;"><h1>Was loaded</h1><p>Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content.</p></div>');
   $("#"+elementId).delay(300).scroll(function (){reloaderMore(elementId);});
  }
    }
}
/***Sample function End*************************************/
/***Sample function Use Start*******************************/
$(document).ready(function(){
 $("#t1").scrollTop(0).scroll(function (){
  reloaderMore("t1");
    });
});
/***Sample function Use End*********************************/

.reloader {
    border: solid 1px red;
    overflow: auto;
    overflow-x: hidden;
    min-height: 400px;
    max-height: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 400px;
    width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <div class="reloader" id="t1">
  <div id="elm1" style="margin-bottom:15px;">
   <h1>Some text for header.</h1>
   <p>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
   </p>
  </div>
  <div id="elm2" style="margin-bottom:15px;">
   <h1>Some text for header.</h1>
   <p>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
   </p>
  </div>
  <div id="elm3" style="margin-bottom:15px;">
   <h1>Some text for header.</h1>
   <p>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
    Some text for content.<br>
   </p>
  </div>  
 </div>

I hope it will be helpfully for other programmers.

Answer 13

If it work all fine for Mozilla, with html,body selector, then there is a good chance that the problem is related to the overflow, if the overflow in html or body is set to auto, then this will cause chrome to not work well, cause when it is set to auto, scrollTop property on animate will not work, i don't know exactly why! but the solution is to omit the overflow, don't set it! that solved it for me! if you are setting it to auto, take it off!

if you are setting it to hidden, then do as it is described in "user2971963" answer (ctrl+f to find it). hope this is useful!

Answer 14

 $("html, body").animate({ scrollTop: 0 }, "slow");

This CSS conflict with scroll to top so take care of this

 html, body {
         overflow-x: hidden;        
    }

Answer 15

I found that my CSS was the issue. I removed this from my style sheet and it worked fine.

*{scroll-behavior: smooth;}

Answer 16

I don't think the scrollTop is a valid property. If you want to animate scrolling, try the scrollTo plugin for jquery

http://plugins.jquery.com/project/ScrollTo