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?

you mean auto scroll to the bottom of the page in the iframe? — Dev Man, Jun 18 '16 at 08:23
(Firefox animates scrolls. So there shouldn't be an animation) — Fame Person, Jun 18 '16 at 08:24
What have you tried so far? The document.scrollTop() function should do it. — NickSlash, Jun 18 '16 at 08:28
Using iframe you cannot do what you want (not to my knowledge anyway, maybe you can). Use ajax, load and parse. Also you should put the condition about animation inside the main question. — zozo, Jun 18 '16 at 08:28

score 6 · Accepted Answer · edited May 23 '17 at 12:08

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>

Thank you. That's a nice solution. – Fame Person Jun 18 '16 at 09:14 — Fame Person, Jun 18 '16 at 09:14
@FamePerson: For cross browser support, check my update – Asons Jun 18 '16 at 09:24 — Asons, Jun 18 '16 at 09:24
Ok. I checked it. Thanks for your help ;-) – Fame Person Jun 18 '16 at 12:30 — Fame Person, Jun 18 '16 at 12:30

score 2 · Answer 2 · edited May 23 '17 at 12:22

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).

sylvain1264 · Answer 3 · 2016-06-18T16:34:49.057

1

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.

edited Jun 18 '16 at 16:34

answered Jun 18 '16 at 08:31

sylvain1264

855
2
8
23

That works if the page is displayed outside an iframe. thank you. – Fame Person Jun 18 '16 at 09:15

score 1 · Answer 4 · answered Jun 18 '16 at 09:58

1

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

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

:D

answered Jun 18 '16 at 09:58

Shrikantha Budya

646
1
4
15

Automatically show bottom instead of top of an HTML page

4 Answers4