We Keep Coding

how to move the screen without a click to the bottom of the page using JavaScript?

I am trying to create a website using JavaScript. I need to programm it in such a way, that when you open the website, you directly get to the bottom of the page (without clicking anything). That means, the page moves itself automatically downwards.
How can I get this done?

Use window.scrollTo() function
window.scrollTo(0,document.body.scrollHeight);

Here's a good answer:
how to automatically scroll down a html page?
Including a live demo: http://jsfiddle.net/ThinkingStiff/DG8yR/
Script:
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
Html:
<div id="top">top</div>
<div id="bottom">bottom</div>
CSS:
#top {
border: 1px solid black;
height: 3000px;
}
#bottom {
border: 1px solid red;
}
Enjoy :)

Call This function on a component or page that you want the particular behaviour. This function will scroll to the bottom of the page. There won't be any scrolling effect without the css for smooth scroll. I have shown how to specify the css for the scrolling effect below, incase you require the scroll behaviour.
function scrollToPageBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
If you require the scroll behaviour:
Here, I'm specifying the scroll behaviour on the root itself. You can target specific containers as per your requirement
*{
scroll-behavior: smooth;
}
P.S: This question has many answers already posted but I am sharing
this because no one talks about the css scroll behaviour which some
users may require. This answer is specific to the question where the
OP wants to scroll to the bottom of the page without any user action
when a page or component is opened or rendered but also specifyiuing the CSS for scroll behaviour if a user requires it.

display loading image until all data gets loaded

Right now i am simply giving a definite time interval after which the loading image disappears but i want to place a loading image which will be display until all the content in the background is not fully loaded.
current code
#loadingImgDIv{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:14;
}
<script>
setTimeout("removeLoadingImg()",5000);
function removeLoadingImg(){
//using css display:hidden; attribute on #loadingImgDiv using javascript
}
</script>
But this is not the right way to do it...so please help me

Simple:
spinner.show()
$.get('/api')
.success(successCb)
.fail(failCb)
.always(function(){
//...
spinner.dismiss()
})

Load page Ajax and then slide it into page OR plugin

My site structure is more or less this:
HOME - PAGE1 - PAGE2 - PAGE3.
What I would realize is a site with transition like "a mobile app" between pages, where you click on a button then the new page slide in. Now I'm looking on how to realize that, if using AJAX (that load the page and slide it but I don't know AJAX) or use a plugin (but I can't find anything).
Another alternative is create a single page and then moving into that (would be great find a plugin to do that) but the pages are big so my site will became heavy.
Does anyone have an idea how help me?
Thanks guys!
ps: the site is developed ONLY for tablet and smartphones

there are many ways to implement what you wanted, below i will show you one of them. (example at the bottom of the answer)
you hide the content outside of the screen, and slide it when page loads:
HTML:
<div class="content_div">
<p class="title">HOME</p>
page 1
</div>
CSS:
body{
overflow:hidden;
}
.content_div {
box-shadow:0 0 10px;
border:10px solid black;
height:800px;
left:-1000px;
width:100%;
-webkit-animation:slide_in 800ms ease-out forwards;
position:absolute;
box-sizing:border-box;
}
.title{
font-size:50px;
text-align:center;
}
.nav{
margin-left:20px;
}
#-webkit-keyframes slide_in{
0% {
left:-1000px;
}
100% {
left:0px;
}
}
now when you click a link, you intercept the click using a custom handler, prevent the default redirection, execute a "slide out" animation and once the animation is done, you redirect manually:
the function inside .promise().done() will be executed as soon as all animations on the object are done:
$(function(){
$(".nav").on("click",function(ev){
ev.preventDefault();
$(".content_div").animate({
"margin-left":$(".content_div").width() +100
}).promise().done(function(){
window.location="http://jsfiddle.net/TheBanana/27o989vy/embedded/result/";
});
});
});
here is a Live Example
implement this on every page in your website, and you should have sliding transitions.
change the transitions if you would like a different animation.
NOTE: in jsfiddle it will be a bit messed up because it will open itself inside itself, but on your website it will work as needed.
UPDATE FOR AJAX:
if you would like to avoid the disappearing of pages while window relocates to a new page, you need to load the content from the new page dynamically instead of changing location.
you can do that using plain ajax, or you can use jQuery's ajax extension .load(), it does the same ajax behind the scenes:
$(".nav_waitforajax").on("click", function (ev) {
ev.preventDefault();
$(".content_div").animate({
"margin-left": $(".content_div").width() + 100
}).promise().done(function () {
$(".content_div").load("/three", function () {
$(".content_div").animate({
"margin-left": 0
});
});
});
});
Ajax Example
UPDATE 2: delegated handlers for dynamic content:
//monitors a `mouseover` event on every element inside `.content_div`
//which fits the selector of "*" (everything)
$(".content_div").on("mouseover","*",function(){
$(this).css({
"background":"red"
});
});
Delegates Example

DIV content fade in/out confusion

I have searched through StackOverflow posts and various forums, but cannot find an answer. I have found answers for similar questions, but nothing breaks it down quite enough for me to understand. I understand a good deal of PHP and HTML, but am having difficulty with scripts.
How can I click on a link, get the href (or what do I need?), have it fade out the current content, find the content I'm trying to load (href or whatever in the link) and load it, then fade it in?
My previous problems with random bits of code I've tried:
While going from page to page if another link was clicked while loading, it would only partially fade the second page in.
Each link had to have it's own script to direct it there. Could never figure out how to make it get the href of the link clicked.
Examples were so complicated I couldn't modify them to what I needed exactly. I need to understand the process of it.

Something like:
$('.link').on('click', function(){
$('.content').fadeOut().load('/path/to/script', function() {
$(this).fadeIn();
});
});
The key to this to use a HTML page or PHP script which can return the content you want. You might want to retrieve the URL from another element or hard-code it into your script - your call. For more information about how load() works, visit jQuery's documentation.

I actually developed something just like this some time ago.
The trick (or a trick) is to wrap your page an an iframe, and on the parent window, have a div element that fades into view when a page is requested, and fades out when the page loads.
The parent window looks like this:
<!DOCTYPE html>
<html>
<head>
<title>< Page1 ></title>
<style>
html, body{
font-family:helvetica;
}
#fade, iframe {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
border-width:0px;
z-index:-1;
opacity:0;
color:#AAA;
background-color:#FFF;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
}
iframe {
opacity:1;
z-index:1;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="fade">
<h1>Loadin..</h1>
</div>
<iframe src="p1.html"></iframe>
<script>
var fade = document.getElementById("fade");
var iframe = document.getElementsByTagName("iframe")[0];
var t = null;
addEventListener("message", function(e) {
if(t!=null)clearTimeout(t);
fade.style.zIndex = "2";
t=setTimeout(function(){
fade.style.opacity = "1";
},0);
}, true);
iframe.addEventListener("load", function() {
if(t!=null)clearTimeout(t);
t=setTimeout(function(){
fade.style.opacity = "0";
},0);
document.title = iframe.contentWindow.document.title;
t=setTimeout(function(){
fade.style.zIndex = "-1";
},300);
}, true);
</script>
</body>
</html>
And the subpages would each have the following code:
<script>
function go() {
window.parent.postMessage("showLoadScreen", "*");
}
</script>
somepage.html
This code is a little different in that the fader doesn't pop up unless the requested resource is taking awhile to load. But, you get the idea.
Since the iframe only exists for visual purposes, it shouldn't cause any major problems. However, note that this code uses HTML5's postMessage API, and you may want to tweak it a bit.

jQuery lightbox plugin that scrolls with the page

Some of the JavaScript lightbox effects that I've seen position the lightbox relative to the viewport, so that when you scroll the page you will still see the lightbox.
The other kind are the ones that are positioned relative to the page contents. If you scroll a page containing one of these, the lightbox moves with the rest of the page.
I don't know what this second type is called (or if there is even a term for this behaviour).
I've looked at FancyBox and SimpleModal, but as far as I know, these are positioned relative to the viewport only.
What jQuery plugin allows lightboxes that scroll with the page?

that would actually be up to css.
lightboxes are just divs that are positioned absolutely (they move with the page) or fixed (they are positioned relative to the browser window.
Basic Lightbox HTML
<div class="lightbox_wrapper">
<div class="lightbox">
the lightbox content loaded by ajax
</div>
</div>
Basic CSS for a scrolling lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:absolute; }
Basic CSS for a viewport fixed lightbox
div.lightbox{ height:250px; width:250px; margin:auto; position:relative; }
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed; }
Now I believe that most of the common lightboxes make you include their css, or they add it to the DOM on load. If they as you to include a css file then just look for the class that declares the properties of a lightbox and change the position method. otherwise you'll have to add the values to your own css and declare them as important like this.
CSS property marked as important
div.lightbox_wrapper{ height:250px; width:100%; top:200px; left:0 position:fixed !important; }
as for another kind of lightbox, I haven't seen one so you'll have to explain more in a comment below...

Robert Hurst is correct in theory, but if you like FancyBox, it supports both modes via configuration
If you look at bottom of the http://fancybox.net/howto page, it has an option
centerOnScroll If true, content is centered when user scrolls page
here is an example of how you would invoke it:
jQuery(document).ready(function(){
$('#a').fancybox({
centerOnScroll: false
});
});

edit your lightbox CSS as below
#lightbox {
position: fixed;
}
to center your lightbox popup to the window edit the script as below
top = ($window.height()- YOUR_LIGHT_BOX_HIGHT) / 2;
I'm used Lightbox v2.51 and worked well. the only issue is that yet the background is scrolling while the pop up is fixed and centred.

I appreciate that this is an old question, however, I have seen that the JS gurus at designmodo have implemented a version of this very well:
http://designmodo.com/startup/#component-grid
Take a look at the showLargeImage function within the all.js file.