skip to Main Content

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

2

Answers


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

    EDIT:
    Requires jQuery.

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

    Login or Signup to reply.
  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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search