Geek Answers Handbook

Automatically show bottom instead of top of HTML page

I would like to show users who load the site at the bottom of the page, and not - as usual - the top.

A more specific example: I have an iframe element that points to a site with some text. The bottom of this site should automatically display.

How can I understand that?

+4
source share
4 answers

Use flexit tooflex-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>
Run codeHide result

Side note:

, Firefox/Edge/IE11 ( , ), ,

, , .

/* 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>
Hide result
+4

iframe . IFrame javascript.

:

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

. ... , . iframe , .

( ) ajax iframe, , ( ajax http://api.jquery.com/jquery.ajax/, ... ).

+2

, : id html . #<id_of_element_at_bottom>.

, , .

iframe , - .

+1

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

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

: D

+1
source

More articles:


All Articles