JavaScript on the Bottom of the Page

JavaScript at bottom/top of web page?

It'll allow the web page to load visibly before executing JavaScript, which makes sense for things like Google Analytics, which don't need to happen before the page loads.

You may also want to look into things like jQuery, prototype, etc and attach to the "ready" handler, which executes JavaScript code after the DOM has been fully loaded, which is an appropriate place for much JavaScript code.

How to detect if browser window is scrolled to bottom?

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

See demo

JavaScript on the bottom of the page?

It is very important for best practice reasons.

When you have scripts loading in your header, they stop other downloads from taking place! This includes your styling, and will also stop your images from downloading until the script has finished.

This is because JavaScript files load synchronously.

Also note that you will get a flash of unstyled content (FOUT) during loading if you do not move your JavaScript files to the bottom of your page. This is because your CSS will not download until the script has finished loading.

Here is an excerpt from Yahoo performance rule 6.

The second problem caused by scripts is blocking parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. (I've gotten Internet Explorer to download over 100 images in parallel.) While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

References

http://developer.yahoo.com/performance/rules.html/

Especially note rule 6.

Scroll Automatically to the Bottom of the Page

jQuery isn't necessary. Most of the top results I got from a Google search gave me this answer:

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

Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use its scroll height instead.

nestedElement.scrollTo(0, nestedElement.scrollHeight);

Some additional sources you can take a look at:

http://www.alecjacobson.com/weblog/?p=753
http://www.mediacollege.com/internet/javascript/page/scroll.html
http://www.electrictoolbox.com/jquery-scroll-bottom/

Keeping footer and bottom of page

You have to add position:relative; on your body element

body 
{
 position:relative; 
}

#photos
{
 margin-bottom:100px; 
}

why javascript runs when at bottom of page or sometimes from top of page

The placement of scripts indicates dependencies: if script A needs some values from script B, then script B is placed above script A. For example: some JavaScript requires jQuery, so you place jQuery above any script that requires it.

That’s because scripts run from top to bottom.

Some scripts require the DOM to be loaded, e.g. they operate on some HTML elements, i.e. they use document.getElementById or $("selector"). In those cases the HTML elements are required by the script, so those elements need to be above the JavaScript that requires them, or in other words, the JavaScript that requires some HTML elements needs to be placed below those.

There are other options for dealing with this, e.g. utilizing window.addEventListener("DOMContentLoaded", function(){…}) or jQuery’s $(document).ready(function(){…}). These options add event listeners that run later, whenever an event is fired.

Another, newer alternative is the defer attribute.

More details at Why does jQuery or a DOM method such as getElementById not find the element?.

Sometimes, scripts are also put at the bottom to load the content of the page faster, because the scripts have to be downloaded and the content is only loaded after the scripts. You could use the async attribute as an alternative to that.

Load a site at the bottom of the page

This is very simple and does not require jQuery or a cover image or an animation. All you have to do is use the DOM API to select the body element and set it's scroll position to the body's height.

The CSS here is just to simulate overflow on the body.

document.body.scrollTop = document.body.scrollHeight;

html, body { height: 200%; }

Javascript to put centered text at the bottom of the page

Make sure your div is 100% width.

toInsert.style.width = "100%";

var toInsert = document.createElement("div");toInsert.innerHTML = "text to insert";toInsert.style.position = "absolute";toInsert.style.bottom = "0px";toInsert.style.textAlign = "center";toInsert.style.width = "100%";document.body.appendChild(toInsert);