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;*/
}
This question is related to
jquery
jquery-ui
jquery-selectors
// 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);
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!
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.
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");).
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.
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.
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");
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;
}
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;
});
I don't think the scrollTop is a valid property. If you want to animate scrolling, try the scrollTo plugin for jquery
I use:
var $scrollEl = $.browser.mozilla ? $('html') : $('body');
because read jQuery scrollTop not working in Chrome but working in Firefox
$("html, body").animate({ scrollTop: 0 }, "slow");
This CSS conflict with scroll to top so take care of this
html, body {
overflow-x: hidden;
}
So I was having this problem too and I have written this function:
/***Working function for ajax loading Start*****************/_x000D_
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*/){_x000D_
var _x000D_
contener = $("#"+elmId),_x000D_
contenerJS = document.getElementById(elmId);_x000D_
if(contener.length !== 0){_x000D_
var _x000D_
elmFullHeight = _x000D_
contener.height()+_x000D_
parseInt(contener.css("padding-top").slice(0,-2))+_x000D_
parseInt(contener.css("padding-bottom").slice(0,-2)),_x000D_
SC_scrollTop = contenerJS.scrollTop,_x000D_
SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight;_x000D_
if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){_x000D_
$("#"+elmId).unbind("scroll");_x000D_
$.post(ajaxLink,postParameterObject)_x000D_
.done(function(data){_x000D_
if(data.length != 0){_x000D_
$("#"+elmId).append(data);_x000D_
$("#"+elmId).scroll(function (){_x000D_
fuweco_reloaderMore(elmId,ajaxLink,postParameterObject);_x000D_
});_x000D_
}_x000D_
});_x000D_
}_x000D_
}_x000D_
}_x000D_
/***Working function for ajax loading End*******************/_x000D_
/***Sample function Start***********************************/_x000D_
function reloaderMore(elementId) {_x000D_
var_x000D_
contener = $("#"+elementId),_x000D_
contenerJS = document.getElementById(elementId)_x000D_
;_x000D_
_x000D_
if(contener.length !== 0){_x000D_
var_x000D_
elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))),_x000D_
SC_scrollTop = contenerJS.scrollTop,_x000D_
SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight_x000D_
;_x000D_
if(SC_scrollTop >= SC_max_scrollHeight - 200){_x000D_
$("#"+elementId).unbind("scroll");_x000D_
$("#"+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>');_x000D_
$("#"+elementId).delay(300).scroll(function (){reloaderMore(elementId);});_x000D_
}_x000D_
}_x000D_
}_x000D_
/***Sample function End*************************************/_x000D_
/***Sample function Use Start*******************************/_x000D_
$(document).ready(function(){_x000D_
$("#t1").scrollTop(0).scroll(function (){_x000D_
reloaderMore("t1");_x000D_
});_x000D_
});_x000D_
/***Sample function Use End*********************************/.reloader {_x000D_
border: solid 1px red;_x000D_
overflow: auto;_x000D_
overflow-x: hidden;_x000D_
min-height: 400px;_x000D_
max-height: 400px;_x000D_
min-width: 400px;_x000D_
max-width: 400px;_x000D_
height: 400px;_x000D_
width: 400px;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>_x000D_
<div class="reloader" id="t1">_x000D_
<div id="elm1" style="margin-bottom:15px;">_x000D_
<h1>Some text for header.</h1>_x000D_
<p>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
</p>_x000D_
</div>_x000D_
<div id="elm2" style="margin-bottom:15px;">_x000D_
<h1>Some text for header.</h1>_x000D_
<p>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
</p>_x000D_
</div>_x000D_
<div id="elm3" style="margin-bottom:15px;">_x000D_
<h1>Some text for header.</h1>_x000D_
<p>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
Some text for content.<br>_x000D_
</p>_x000D_
</div> _x000D_
</div>I hope it will be helpfully for other programmers.
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.
Source: Stackoverflow.com