Load a site at the bottom of the page

Question

I am working on a build for a client of mine and they are wanting this page to load at the bottom of the site, and then the user scrolls up through the site. So basically, the site is built backwards. This site is built on WordPress and I am using Divi, by Elegant Themes as my framework. I have spent the last three hours researching this online and I have also submitted a ticket to Elegant Themes. For the life of me, I cannot figure this out.

I have tried creating an ID at the bottom of the page and I was planning on completing a 301 redirect. This is not working either as the page loads, then scrolls, and completes the scroll too high. I need the page to load with the footer at the very bottom of the page. The link to the dev site is below.

http://dev.narratorgroup.com

possible duplicate of [Scroll automatically to the bottom of the page](http://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) — tcigrand, Jun 12 '15 at 20:24
You could use JS to scroll to the bottom of the page. Use a splash/loading screen to cover the animation, then remove the cover once it's done. — Dryden Long, Jun 12 '15 at 20:24

score 2 · Accepted Answer · 2015-06-12T20:51:54.057

2

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%; }

If you wrap it like this and there is no other document.onload handler defined then you can place this anywhere in the document

<script>
    document.onload = function() {
        document.body.scrollTop = document.body.scrollHeight;
    }
<script>

edited Jun 12 '15 at 20:51

answered Jun 12 '15 at 20:30

Awesome, thank you for the fast reply. So, my ignorance will be exposed, but I am not sure how to access the DOM through this framework. There is a and section within the ePanel for custom scripts. Would I place your JavaScript there? Here is a link how the ePanel is laid out. It is towards the bottom under integration. Is this correct? http://www.elegantthemes.com/gallery/divi/documentation/theme-options/ – Jun 12 '15 at 20:37
In the HTML file or within the integration section? Sorry for being so green. – Jun 12 '15 at 20:41
I'll give that a go and let you know. I greatly appreciate your help! – Jun 12 '15 at 20:43
And naturally I dont have access to that file within WordPress. – Jun 12 '15 at 20:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80435/discussion-between-drew-tuzson-and-humble-rumble). – Jun 12 '15 at 20:50

Austin Collins · Answer 2 · 2015-06-12T20:31:20.850

0

<script>
        var main = function() {
            window.scrollTo(0,document.body.scrollHeight);
        }
        $(document).ready(main);
    </script>

EDIT: Requires jQuery.

Example: http://jsfiddle.net/f74uk171/

edited Jun 12 '15 at 20:31

answered Jun 12 '15 at 20:24

Austin Collins

439
3
13

Load a site at the bottom of the page

2 Answers2