Automatically show bottom instead of top of an HTML page

Question

I would like to show users who load the site the bottom of the page and not — as normally — the top.

More specific example: I have an iframe element which points to a site with some text. The bottom of this site should automatically be shown.

How can I realize this?

Answer 1

Use flex and its flex-direction: column-reverse;

 html, body { margin: 0; } .wrapper { display: flex; flex-direction: column-reverse; max-height: 100vh; overflow: auto; } 

 <div class="wrapper"> Top<br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Bottom </div> 

Side note:

This solution seems to still has some flaws not work properly in Firefox/Edge/IE11 (they don't show the scroll bar, though content start at bottom), so here is a fix for them until they start behave

The below code snippet is taken and cleaned up from another answer of mine, at this post , where there are a few more options to handle this issue.

 /* fix for IE/Edge/Firefox */ var isWebkit = ('WebkitAppearance' in document.documentElement.style); var isEdge = ('-ms-accelerator' in document.documentElement.style); function updateScroll(el){ el.scrollTop = el.scrollHeight; } if (!isWebkit || isEdge) { updateScroll(document.querySelector('.content')); } 

 html, body { margin:0; } .wrapper { display: flex; flex-direction: column-reverse; max-height: 100vh; overflow: auto; } /* fix for hidden scrollbar in IE/Edge/Firefox */ .content { overflow: auto; } @media screen and (-webkit-min-device-pixel-ratio:0) { .content { overflow: visible; } @supports (-ms-accelerator:true) { .content { overflow: auto; } } } 

 <div class="wrapper"> <div class="content"> Top<br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Long content <br><br><br> Bottom </div> </div> 

Answer 2

You can use an event on the finish loading event and scroll that iframe to the bottom. To do that you can check this How to properly scroll IFrame to bottom in javascript .

Basically your final code would look something like this:

 $(function() {
      iframe.contentWindow.scrollTo( 0, 999999 );
 });

Note: After seeing your comment about animation... this solution would add a bit of animation, you cannot get rid of that in the specified conditions. If you have access to both the iframe content and your project content maybe you can find an alternative solution.

A second solution (that respects your request) would be to load the destination page with ajax instead of iframe, parse it, and show in page only what you need (for ajax call you can check http://api.jquery.com/jquery.ajax/ , for parsing... that's your part).

Answer 3

If you want no scroll you can do it this way: Set an id to html element at bottom of the page. Then add at the end of your link #<id_of_element_at_bottom> .

At load broswer will go at bottom, no sure it will be unseen.

For the iframe check if there are some id at bottom.

Answer 4

I think the best way to achieve this in javascript is by a simple code:

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

:D