Develop Reference

scrollTo() and jquery scrollTop() not working in Chrome

I am making a puzzle platformer using html elements as obstacles. Some levels I want to start at the bottom of the document. So I tried using
$(document).ready(function() {
$(document).scrollTop($(document).height() - $(window).height());
}
and
$(document).ready(function() {
window.scrollTo(0, document.body.scrollHeight);
}
they both work perfectly fine in Firefox but neither work in Chrome. I only could get it to work when animating the scroll which will not work for what I am trying to do.
edit: I am not using jQuery.toScroll() I tried vanilla toScroll and jQuery.scrollTop()

Browsers attach their scrollbars to the page differently. Use $('html,body').scrollTop(). You should also use $(window).innerHeight(). Like this...
$('html,body').scrollTop($(document).height() - $(window).innerHeight());
//Or to smooth scroll it
$('html,body').animate({
scrollTop: $(document).height() - $(window).innerHeight()
}, 1000);
Note: $(document).height() will return the same value as $(window).innerHeight() if the document is shorter than the window.

I did not execute full testing but I'm also experiencing the issue via Developer Tools at least on a specific jQuery version and latest Chrome. animate does work. scrollTop and scrollTo do both not work. Nonetheless even if you explicitly said that you not want to use animate I still recommend it as it is working and I see no reason of not using it if you use it like this:
$('html, body').animate({scrollTop: 500}, 0);
This will scroll to 500px and has no animation at all because the duration is set to 0. I also have to point on a previous issue with Chrome:
Possible duplicate
Issue on Github
I know the issue is closed but it might be relevant and probably it should be reported because there is something fishy.

jQuery auto scroll to elements

I came across this useful blog Smoothly scroll to an element without a jQuery plugin
In the below code
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
Auto scrolls down to target-element if sliderOn id exists within the body, but, because i have a fixed navbar the target-element goes behind it and cause not to show 20px of the target-element on top. Any solution here?

Try this:
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top - 20
}, 1000);

ScrollTop works in Chrome and Edge but not Firefox

So I have a JavaScript function that scrolls to the desired element when that part of the navigation bar is clicked. It works fine in Chrome and Edge, but not Firefox or IE.
The function:
$('html', 'body').animate({
scrollTop:$('.'+nextView).offset().top}, 1500
);
nextView is a variable from another function where it determines which part of the nav was clicked. Basically, it contains the name of the div to be scrolled into view.
Anyone know why it doesn't work? Or an alternative method of auto scrolling that will work?

Try .position() instead of .offset() to see if that works. Might require some correction.
EDIT: it's probably related to your selector. Use html, body as 1 string:
$('html, body').animate({
scrollTop:$('.'+nextView).offset().top}, 1500
);

I made a slight change to the code and now it seems to work. I find the position of the element to be scrolled to before the animate call, then put that variable into the scrollTop and it works now, even in IE!
scrollPos = $('.'+nextView).offset().top;
$('html, body').animate({
scrollTop: scrollPos
}, 1500);

smooth scroll does not work with overflow-y

I am trying to use a smooth scroll and adopted an example I found online. Here is a fiddle with my code
https://jsfiddle.net/4DcNH/144/
I have special conditions set to html and body (basically to offset the page context by 50px from the top to avoid the navbar). Therefore the smooth scroll does not work. Does anybody know a solution to this?
thanks
carl
$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});

Is this what you're after?
$(document).ready(function () {
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
$('html').css({'overflow-x':'auto','overflow-y':'hidden'});
}
$('a[rel="relativeanchor"]').click(function () {
var $el = $($(this).attr('href'));
$('html, body').stop().animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});
});
JSFiddle
Updates were needed in the CSS. The html overflows were removed for chrome, because otherwise, this would not work in Chrome. However, the overflows are needed for Firefox, so they are done by setting it dynamically in the JavaScript (set if not chrome).
If you want to maintain an offset, subtract it from the calculated offset. Given the above, $el.prop('offsetTop') - 50 adds 50px above.

The issue appears to be related to differences in how Chrome scrolls the <body> with height:100%. A discussion of the issue is here: Body set to overflow-y:hidden but page is still scrollable in Chrome
A workable solution is to wrap the scrolling content in <div class="content"> and disable scrolling on <body>.
Here's a JSFiddle to demonstrate the updated behavior: https://jsfiddle.net/f1zv1c5k/5/
To get the scroll to stop at the appropriate point, you need to subtract the vertical offset applied to the <html> tag (using $el.prop('offsetTop') recommended by #vol7ron) when scrolling. Your smooth scroll function would look like this:
$('a[rel="relativeanchor"]').click(function(){
var $el = $($(this).attr('href'));
$('.content').animate({
scrollTop: $el.prop('offsetTop')
}, 2000);
return false;
});

scrollTop animation caused white flash of screen

I have a fixed menu at the top of my screen with 4 option, each option when clicked will scroll to a section within the page. The code I am using is as follows:
$("#click1").click(function (){
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
The scroll works as expected but when I click the options I get a flash of a white page. Has one else seen this and know any solution. Not sure if it's caused by the fixed menu element on the page.

I had this issue before. Try this:
$("#click1").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
Here is the jQuery API: http://api.jquery.com/event.preventdefault/