We Keep Coding

Slide Element Off Screen -- Wait --- Slide Back in place

I want to slide an image (of a boomerang) off screen and then 5 seconds later slide it back into place. I want the image to right next to some text to begin with and end.
Ideally I'd like the animation to be smooth. I can find many examples doing things like this, but none that seem to do this very simple thing. Any pointers in the right direction would be greatly appreciated.
$(document).ready(function()
{
var my_div = $("#target");
var div_top = my_div.offset().top;
$(document).scroll(function()
{
if (div_top <= $(document).scrollTop()+($(window).height() /2))
{
// EVENT TO SEND IMAGE OFF SCREEN TO THE RIGHT
// EVENT TO WAIT 5 SECONDS
// EVENT TO SEND THE IMAGE BACK
}
});
});
<div id="target;">
<p style="font-size:32px; display: inline;">TEXT</p>
<img id="foo" style="height:35px;" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Ic_account_box_48px.svgg">

You've tagged the question with javascript and provide code that's an incomplete javascript solution, but you also mention you want it to be smooth.
Perhaps declaring a CSS animation using transforms would be better?
Check out https://daneden.github.io/animate.css/ for some examples of what a CSS animation can do. And they can be quite complex, as you can define as many steps as needed.
Now if in some of your animation steps you need to perform calculations, you're stuck with JS, but you can still use a library that uses CSS transitions under the hood get get a smooth frame-rate.
I've used move.js for such a task in the past, and worked pretty well.
https://visionmedia.github.io/move.js/

Inline JavaScript seems to load randomly, if at all

First off, I'd like to say that I'm sorry if this is an easy question. I'm fairly new to the HTML/CSS scene, and haven't even arrived at the Javascript one yet.
Here's my problem. I have a website I'm trying to build for my uncle, which you can see here. (it's still deep in pre-alpha stage, so the links don't work). It works fine as a local file, but as soon as I host it, my 'sticky' header starts to stick too soon, if at all. Reloading the page works about 1 time in 10.
I may or may not have isolated the cause of the problem: my placeholder. My sticky code itself works fine most of the time, except for one thing: as the sticky bar docks, it becomes fixed and the text jumps up 90-odd pixels. To combat this, I added lines 6 and 7 to my code below:
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
jQuery('.content').css("paddingTop", "0px");
}
document.addEventListener('scroll', onScroll);
It basically sticks a placeholder in there to stop that jump. It works fine, except now it's broken my code. I have experimented a bit and discovered that the placeholder seems to load randomly, and the header just goes weird. That's the best I can do.
It seems to be the placeholder code breaking it, as without the code it seems to work fine, perhaps after a couple of reloads. However, I am completely stumped. Has anyone got any idea how to fix it?
(Tested in Chrome 64 bit and 32 bit, as well as Chrome for Android, although that's glitchy on another level. Works fine as a local page, but not when hosted.)

It seems that the these code is executed too early that the image is not loaded yet, you can use chrome dev tool to add a pause to break to var origOffsetY = sticky.offsetTop;.
Then you can see 2 cases: 22 or 642
You can further inspect that the image, which should be the banner, is not completed when 22 condition is met, and if you use document.querySelector('.splash img') to get it and check its height, you'll see 0. While in the 642 case, you'll get 500.
The difference may be sometimes the image come from cache, sometimes it load from internet, so it may or may not able to decide the height when your script is executed.
So we have to make sure the image which is in the .splash is already loaded:
<script>
// Wrap the logic to a function for call.
var stickFunction = function() {
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
window.scrollY >= origOffsetY ? jQuery('.content').css("paddingTop", "88.8125px"):
jQuery('.content').css("paddingTop", "0px");
}
document.addEventListener('scroll', onScroll);
}
// Get the image element
var splashImage = document.querySelector('.splash img');
// Check if image is complete or not.
if (splashImage.complete) { // If completed, do the logic.
stickFunction();
} else { // If not, tell the image to call the function for you when it is loaded.
splashImage.onload = stickFunction;
}
</script>

Parallax Scrolling with JQuery animation stumbles

I have implemented a parallax effect with a video. I wanted to do it for my own so I did it without any framework or plugin but it is slow and it stumbles around.
My idea was that there are 2 pictures, 1 video and 2 boxes in front of them. So my code was that if i am on the position of the 1 picture, the pictures scroll slower (with margin-top) like this:
$( window ).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll>470){
scroll = scroll-470;
var scrollSlow = scroll*0.4;
$('#Picture1').css('margin-top', scrollSlow);
$('#InfoBox1').css('margin-top', -scroll);
if(scroll<400){
$('#Picture2').css('margin-top', -scroll);
}
$('#InfoBox2').css('margin-top', -scroll+heightPX);
if(scroll<900){
$('#Picture3').css('margin-top', -scroll+heightPX);
}
}
}
But if I scroll down it doesn't work.
Here is the online version: http://p-goetz.de/Parallax.html

Problem: You are probably testing your website in chrome/safari, try using Firefox you will notice that the things are smoother.
Reason: In some browsers when you scroll they jump 100px at once hence your parallax animation start looking odd.
Solution: Try to use a custom scroll with smooth fx.I will recommend Nicescroll.

The issue is the images/videos are so large, the browser lags when scrolling before they are completely loaded. One solution would be to wait for the images/videos to finish loading before presenting the page.
$('body').hide();
var video = document.getElementById('PARALLAX_bild2');
video.addEventListener('loadeddata', function() { // video is loaded
$('img').load(function() { // images are loaded
// Do some fancy fade in of the page here. This is just an example.
$('body').show();
});
}, false);

Delayed autoscroll effect on a block of text

Im fairly new to JS... please be gentle.
Can anyone suggest a way to pull off a delayed autoscroll effect on a block of text?
It's important to mention that my ultimate goal is to use this on a popup modal window, on iOS devices. And because iOS browsers do not display the scrollbar until user interaction, I am resorting to the auto-scroll.
In effect: I would like the page to load, wait a couple of seconds, then have begin to slowly scroll down. The scroll is intended to be a hint to the user that there is more content available, therefore if there is any way to stop or temporarily pause the auto-scroll on user interaction- that would be optimal.
I have searched for my answers a couple of hours now, but between not being able to initialize the found code to my design (again, I'm fairly green), and not being able to find a solution that achieves everything I need - I am turning to brighter minds.
I have set up a fiddle with my HTML and CSS: http://jsfiddle.net/zfMsQ/
Any help is greatly appreciated!
ps: This is my very first post on StackOverflow :)
My code:
Extensive. Linked above.

Here you go: http://jsfiddle.net/zfMsQ/3/
var roll = true;
var max = 0;
var text = $("#content");
function scroll() {
text.scrollTop(text.scrollTop() + 1)
var top = text.scrollTop()
if (top > max) {
max = top
if (roll) {
setTimeout(scroll, 50)
}
}
}
text.on("mouseenter mouseover mousedown", function(){
roll = false;
})
setTimeout(scroll, 2000)

Scroll window without a jump (javascript or hashtag)

I want a solution either using a hashtag pointing at the name of an anchor tag or javascript.
The javascript I am currently using looks like this window.scroll(0, 20000);. The problem is that this causes the window jerk down when a user arrives on the page.
I know there are jQuery animations that make this movement more gradual. However, what I want is something that makes the movement of the window imperceptible to the user. I want to be as if the user landed at the bottom of the page.

The problem you face is that you wish to go to the bottom of your page which has not loaded yet. I would consider loading the page in a hidden format then show it when it has all loaded and after scrolling the user at the location you want. Use the focus or scroll to methods.
Take a look at the filament group website.
http://filamentgroup.com/
they hide the page with a loading screen until it is ready.
This way there is no jerk.
Hope this helps.

In loop it works, if the page is fully loaded and shown:
for(var n=0;n<1000;n++) window.scrollBy(0,20);
(Notice that 20*1000=20000, which was the original place to scroll.)

Teemu's answer doesn't seem to work for me (it goes straight to the bottom, making the loop with scrollBy stepping invisible), because it doesn't implement a delay.
If you mean to animate from top to bottom of the page in a 1000ms, try something more like this:
for (var n = 0; n < 1000; n += 1) {
setTimeout(function () {
window.scrollBy(0, document.height / 1000);
}, n);
}
That will give a 1 second (1000ms) animation, scrolling to the bottom in roughly 1000 steps.