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?

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?

• javascript
• html
• css

• you mean auto scroll to the bottom of the page in the iframe? – Dev Man Commented Jun 18, 2016 at 8:23
• Yes. That's right. (But without animation please) – Fame Person Commented Jun 18, 2016 at 8:24
• (Firefox animates scrolls. So there shouldn't be an animation) – Fame Person Commented Jun 18, 2016 at 8:24
• What have you tried so far? The document.scrollTop() function should do it. – NickSlash Commented Jun 18, 2016 at 8: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 Commented Jun 18, 2016 at 8:28

4 Answers 4

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>

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 ment 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./jquery.ajax/, for parsing... that's your part).

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

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

:D

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.