Develop Reference

Wrong scroll to anchor with owl-carousel before anchor section

I use this script to scroll down to a certain anchor when page is loaded:
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
});
Anyway, before this #myanchor there are 2 sections containing 2 different owl-carousel. The scroll goes to the wrong position when page loads. It goes aproximately over the secon owl-carousel.
I suppose that it's caused by a wrong calculation of the window height because at the first moment the carousel are loaded have an height equal to 0. I just suppose that.
I don't want to assign a minimum or fixed height to those section. So, there's a solution? Maybe a little delay in scroll down? Could someone suggest me the code that could help me solve this issue?
Thanks so much in advance!

The best option would be to add an event listener for the images to finish loading. But we developers have timelines to get stuff done. So, just use a timeout to give the carousel time to load. In most cases, users need time to absorb your content so you have a few seconds before they click on anything.
$(document).ready(function () {
// Handler for .ready() called.
setTimeout( function() {
$('html, body').animate({
scrollTop: $('#myanchor').offset().top
}, 100);
}, 3500);
});

Javascript scrollTop bug

I have written the most basic scrollTop function to move the page focus down to the content of the site - skipping past the header / nav / hero images, if the page is page number 2,3,4,5,6... of products.
if(window.location.href.indexOf("/?sf_paged=") > -1) {
$('html, body').animate({
scrollTop: $(".searchandfilter").offset().top
}, 2000);
};
If I run this in my console (before implementing into live code) the page operates as expected - moves to the element I state and positions it to the top of the page.
However, here is where my question lies: Once I place this in my code to run on ready (implemented into my footer scripts) it passes the element I wish it to scroll to (stops 3/4 of the way down the page not 1/4).
I need it to stop when it hits the element not afterwards - I know this code works, can anyone think of a reason this may be happening?
Thanks, Jason.

As HerrSerker and Andrei have brought to light - running on load allows the elements above to have loaded before it decides to scroll down the page.
$(window).bind("load", function() {
if(window.location.href.indexOf("/?sf_paged=") > -1) {
$('html, body').animate({
scrollTop: $(".searchandfilter").offset().top
}, 2000);
};
});
Thank you for bringing your solutions you have helped a whole lot of brain ache.

Repeatedly scroll infinite scrolling page with jquery

I want to repeatedly scroll to the bottom of the page and back up every 40ms.
$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400);
},400);
setInterval(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400);
},40);
},80);
So far so good. Only problem is, the page I want to scroll uses infinite scrolling, i.e. each time I scroll to the bottom of the page, the page height ($(document).height()) changes. So instead of scrolling the entire page, it keeps scrolling the same distance as the original height of the page.
The point of the script is to get the full content of the page after scrolling it to the very bottom (i.e. such a number of times that scrolling it once more would not increase the content of the page any longer). How can I modify this script so that it scrolls to the very bottom of the page each time the page height increases?

Have you considered using code like this
$(document).height() - win.height() == win.scrollTop())
or
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});

Here is something you could try.
I did not test it... I just wrote it like this.
To initialise it on load, It needs to have two different values in the two Height_ variables.
There is also delays for animation up and down...
Those can be as short as you want.
There is a delay to let the infinite scroll function load the new content.
This one needs to be adjusted wisely.
It should work...
var Height_actual=1;
var Height_mem=0;
var animateDelay_down=400;
var animateDelay_up=400;
var infiniteDelay_load=800;
function forceInfinite(){
// Force infinite scroll to load all it's content
// IF the last known height is NOT the same as the actual.
if(Height_actual!=Height_mem){
// Keep the actual height in "memory" for the next iteration.
Height_mem=$(document).height();
// Going to the bottom
$("html, body").animate({ scrollTop: actualHeight }, animateDelay_down);
// At the end of the animation
// PLUS a delay for the infinite scroll to load the new content.
setTimeout(function() {
// Possibly a new height to keep in "memory".
Height_actual=$(document).height();
// OK, going back to top
$('html, body').animate({scrollTop:0}, animateDelay_up);
},animateDelay_down+infiniteDelay_load);
// Restart the function after all delays.
setTimeout(function() {
forceInfinite();
},animateDelay_down+infiniteDelay_load+animateDelay_up);
}
}
// Init
forceInfinite();

Click-triggered scrollTop takes random amount of time to fire

I have a comment section which automatically scrolls into view when you scroll it (using jQuery scrollTop), and then a button which scrolls you back up when you click it. The first scrolling action always runs perfectly, but the second scrolling action takes a seemingly random amount of time to occur after the button is pressed.
A live demonstration can be found here: www.rouvou.com/KanyeWest. Go down to the comment section, and scroll it to fire the first jquery scroll. Then click the "Back" button to fire the second scroll. It might work instantly the first few times you try it, but if you do it enough, it should be delayed eventually.
html
<div id="comment-section">
<div id="comment-background-up">BACK</div>
<div id="good_comments"><!--CONTENT--></div>
<div id="bad_comments"><!--CONTENT--></div>
</div>
jquery
$("#good_comments").scroll(function() {
$('html, body').animate({
scrollTop: $("#good_comments").offset().top
}, 700);
$("#comment-background-up").fadeIn(200);
});
$("#bad_comments").scroll(function() {
$('html, body').animate({
scrollTop: $("#bad_comments").offset().top
}, 700);
$("#comment-background-up").fadeIn(200);
});
$("#comment-background-up").click(function() {
$('html, body').animate({
scrollTop: $("#randomajax").offset().top
}, 700);
$(this).fadeOut(200);
});
Does anyone know what could be causing this delay?

I suppose this is happening because jQuery daisy-chains the animations. And you initiate the animation on every scroll. So the much you scroll, the more 700ms animations "pile up", hence your go back animation waiting for them all to finish.
It would probably be best to update your code to avoid chained scrollTop animations on the body.
However, for now you could fix this by using jQuery's stop function. I.e.:
$("#comment-background-up").click(function() {
$('html, body').stop(true, true).animate({
scrollTop: $("#randomajax").offset().top
}, 700);
$(this).fadeOut(200);
});

jQuery - scroll or jump to top

The context: I have a one page web app. So there's lots of div's being hidden at any one time (I'm not sure if this matters). What I am finding is that when a user is finished with one page (Page X), then they click back (to Page Y) - if they return back to Page X then the position is the same as when they left the page. The back button is at the bottom, so that's where the user ends up again.
What I want, is when they return to Page X for them to be at the top of the page so they can start again. Whether it scrolls back or just jumps back - either way is fine.
I've tried all of the following with no success:
// Scroll to top
setTimeout(function(){
alert('scroll');
$('html, body').animate({scrollTop : 0}, 2000);
}, 2000);
Adding a div with the id top-anchor at the top and using:
$('html, body').animate({
scrollTop: $("#top-anchor").offset().top
}, 2000);
Having a and using an anchor, with the code below (it only works once though, after that as the hash is already in the URL it no longer works I suppose):
document.hash = '#top-anchor';
Also tried:
window.scrollTo(0, 0);
No luck.
Any alternative ideas are much appreciated.

You can achieve something like that: DEMO : https://jsfiddle.net/yeyene/bpwtLg1w/1/
Not sure how your content divs are shown and hidden, but just get the idea of adding scroll to top of page div part.
Add scroll event on Back button click event, since you already known which page to go, you can scroll to this page's top, by using...
$(element).position().top
JQUERY
$(document).ready(function () {
$('input[type=button]').on('click', function(){
getPageID = $(this).attr('id');
$('.page').hide(0);
$('div#'+getPageID).show(0);
$('html,body').animate({
scrollTop: $('div#'+getPageID).position().top - 10
}, 500);
});
});