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.

Firefox jQuery/JavaScript scroll

I am trying to get my page to scroll to the top. It works in Chrome but not Firefox. I have read threads on here and tried them, but none have worked. These are the ones I have tried.
window.scrollTo(0,0);
jQuery(window).scrollTop();
jQuery(window).scrollTo();
jQuery(window).scrollTo(0,0);

The scroll top should be triggered on the document element
$(document).scrollTop(0);
You may also use the .animate() if you wanna to add an slow effect
$("html, body").animate({ scrollTop: 0 });

Prevent window scroll below fold until button click

I have a situation where I need the page to not be scrollable past a certain point (I have the hero set to 100vh and the user should not be able to scroll at all) and then upon click of a button the scroll prevention is disabled and the user is then automatically smooth scrolled down to an anchor link directly below (basically scroll down 100vh or the full window height). I need a smooth scrolling animation instead of just a quick jump.
I've tried playing around with variations of the following code with no luck. So far it is really buggy and jumps around and when you reload the page the body overflow is set to hidden but the window position is not always at the top of the screen so you still see some of the below the fold content but still cant scroll.
function() {
function smoothScroll(){
windowHeight = $('window').height();
$('html, body').stop.animate({scrollTop: windowHeight}, slow);
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
};
Fiddle is here: https://jsfiddle.net/njpatten/yxkvnymu/1/

Fixed Code
function smoothScroll(){
windowHeight = $(window).height();
$('html, body').stop().animate({scrollTop: windowHeight}, "slow");
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
Fixed fiddle: https://jsfiddle.net/yxkvnymu/2/
Explanation
You are trying to get the window height by doing $('window').height() which is searching for a 'window' DOM element which doesn't exist. You want to use $(window).height() (note the omission of quotes surrounding window) because window is not a DOM node, it is an object.
In addition, you are using $('html, body').stop.animate({scrollTop: windowHeight}, slow); which has multiple errors. .stop is invalid because the stop property on the NodeList that is returned from $('html, body') is a function that you want to call. You should be using $('html, body').stop().
Also, the animate portion is referencing a variable slow. jQuery's animate function takes "slow" as a string, so that line should be written as such:
.animate({scrollTop: windowHeight}, "slow");
Note the inclusion of quotes on that because we want to pass a string value of "slow" to jQuery's animate function, instead of a variable slow.
Lastly, you are surrounding all of your code in an anonymous function, which seems unnecessary.

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;
});

jQuery animated vertical scroll to one element and horizontal to different element at the same time from a single hash tag/variable

I am a jQuery novice but have got really close to achieving my result. Basically what I am trying to do is the following process:
From page load #anchor:
Convert the hash to an ID and a class
Scroll vertical to an element with the anchor ID
Scroll horizontal to a different element with a class
Additionally, the same functionality works when on the page. I am trying to direct link to the url.homl#hash so it is important that the animation effect works on the load as well.
My example is here: http://willminnig.com/stacko/vertical-test-5.html#1908
So far, I can get it to scroll to the vertical ID on page load but not the horizontal class, and also after the pages has loaded perfectly. It will also scroll to the class the very first time after the page loads perfectly, but is erratic behavior after the 1st time.
This is my (messy) jQuery:
$(window).bind("load", function() {
var mainhash = window.location.href.split("#")[1];
$('html, body').animate({
scrollTop: $('#'+mainhash).offset().top
}, 900, 'swing');
$('a[href^="#"]').bind('click',function() {
var target = this.hash; //target is whole #hash
var whatever = '.pics .'+this.hash.split("#")[1];
$whatever = $(whatever);
$target = $(target); //$target is $(#hash)
$('.pics').animate({
scrollLeft: $whatever.offset().left
}, 900, 'swing');
$('html, body').stop().animate({
scrollTop: $target.offset().top
}, 900, 'swing');
window.location.hash = target; //target is whole #hash
});
});
Any expertise explaining what I am doing wrong would be greatly appreciated! Additionally, I could change the way I am scrolling to the elements if it is recommended. The class/ID/hash was just the best I could come up with. Many thanks all!

To trigger the horizontal scroll on load all you need to do is trigger a click on the element with the id equal to 'mainhash'. You could achieve this by adding this line at the end of your 'load' handler:
$('#'+mainhash).trigger('click');
As for the erratic scrolling, well, it's a little complicated. $whatever's offset().left is $whatever's distance from the left side of the window, not its distance from the left side of .pics. When .pics .scrollLeft() is 0 (ie., when '1900' is flush to the left) then your animation will work correctly, otherwise it won't. I think the solution is to add the .pics .scrollLeft() amount to $whatever's offset().left so that you will have the value of $whatever's offset from the left side of .pics:
scrollLeft: ($('.pics').scrollLeft() + $whatever.offset().left)
Also, I think the 200% widths you have on #picswrap and .pics are wreaking havoc, though I am unable to explain precisely why. I think they should be changed to 100%.