We Keep Coding

ScrollTop() Doesn't work, Not sure what's going on

So below I have some of my JQuery code that should be causing the clicked value to scroll down to another section of the page. I'm not sure what's wrong with my code as it has stopped working, so I'd appreciate any feedback I can get on this.
$(".list-item1").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image1").offset().top
}, 700);
});
$("#list-item2").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image2").offset().top
}, 700);
});
$("#list-item3").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image3").offset().top
}, 700);
});

Onload animate and delay

I have 3 divs and I want after the page loads delay 0.5 then scroll to second div delay 0.5 then scroll to 3rd div. but my problem is I cannot get it to auto scroll to any of the divs
<div id="mydiv">Content</div>
<div id="mydiv2">Content2</div>
<div id="mydiv3">Content3</div>
$(window).on('load', function () {
$('html, body').animate({
scrollTop: $("#myDiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#myDiv3").offset().top
}, 3000);
});

Looks like you just have a typo. You had $("#myDiv2") vs $("#mydiv2"). Also use $(document).ready() instead.
$(document).ready(function(){
$('html, body').animate({
scrollTop: $("#mydiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#mydiv3").offset().top
}, 3000);
});
jsFiddler

You onload event isn't valid try this universal onload from Jquery :
$(document).ready(function () { ... add you code here ... });

Your problem is in your HTML. Your divs are mydiv with a lower case 'D', but you are referencing #myDiv with an uppercase 'D'.

Content hiding under Sticky Navbar

Here is the URL of my website (https://hwrmedia.com.au/).When I scroll down to the HWR Publications section and click on any post of that section, It goes to particular post on another page, hiding the content under the sticky navbar. For this I have used this js code:
$(document).ready(function(){
if (window.location.hash == "#moreInfo") {
$('html, body').animate({
scrollTop: $("#moreInfo").offset().top-100
}, 1000);
}
});

just add this jQuery Code
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top-100
}, 1000);

Start at bottom then scroll up

I'm trying to make my site animate from bottom to top on page load.
Like on this site: http://partnersandspade.com/studio/
The issue is that my site starts scrolling from halfway down on my site, not from the bottom.
What I have now is this:
jQuery(window).load(function(){
$('html,body').animate({ scrollTop: $(document).height() }, 0);
$('html,body').animate({ scrollTop: 0 }, 4000);
});
Any suggestions?

You're asking jQuery to animate every time the user scrolls. And since this fires the scroll event:
$('html, body').animate({ scrollTop: x });
You will scroll your page up and down endlessly.
Use imagesLoaded: https://github.com/desandro/imagesloaded
// are those images loaded yet?
$('body').imagesLoaded(function() {
var dh = $(document).height();
// set the html, body to bottom while you're at opacity 0
$('html, body').animate({ scrollTop: dh }, 0);
// transition to opacity 1
$('body').addClass('loaded');
// animate to the top
$('html, body').animate({ scrollTop: 0}, 2000);
});
Adding a Loading State
To add a loading state I'd do something like this.
CSS
body {
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity: 0.5s;
transition: opacity 0.5s;
}
body.loaded {
opacity: 1;
}

This might help:
$( document ).ready(function(){
$('html, body').animate({ scrollTop: $(document).height() }, 0);
$('html, body').animate({ scrollTop: 0 }, 1000);
});
Here is the working example:
http://jsfiddle.net/xvafa479/

You don't need to watch the scroll event. you can simple remove it and start animation onload.
jQuery(window).load(function(){
$('html,body').animate({ scrollTop: 7000 }, 0);
$('html,body').animate({ scrollTop: 0 }, 2000);
});
it will fire the animation only once.
Editted:
You can set the scroll to the end of the page. Like the other answers :
jQuery(window).load(function(){
$('html,body').animate({ scrollTop: $(document).height() }, 0);
$('html,body').animate({ scrollTop: 0 }, 2000);
});

This should work: http://jsfiddle.net/ck52vb3k/
You just need to remove the scroll function on the animations
Code:
$(window).ready(function(){
$('html,body').animate({ scrollTop: 7000 }, 0);
$('html,body').animate({ scrollTop: 0 }, 2000);
});

ScrollTop to element - 20px

I'm trying to make a scrollTop to my div element, but not exactly where it is. I want
to go 20px before my div element. I think i can explain better showing my code for you:
HTML:
<div id="arrow-down">Click here and go to content!</div>
<div id="content">The content is here!</div>
JQuery:
I already have a code that is working fine, but i want to make it diference.
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 800);
});
});
This code takes me to the div#content, but i want to go 20px from the top of this!
Something like that:
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content" - 20px).offset().top
}, 800);
});
});
Well, i dont know if its look confused... I hope u guys can help me!

You can do this:
$('html, body').animate({
scrollTop: $("#content").offset().top - 20
}, 800);

$(document).ready(function() {
$('#arrow-down').click(function() {
$('body').animate({
scrollTop: $("#content").offset().top-20
}, 800);
});
});
try this