我可以让浏览器窗口从页面底部开始吗？答案

【问题标题】：Can I make the browser window start at the bottom of the page?我可以让浏览器窗口从页面底部开始吗？
【发布时间】：2015-07-01 23:35:07
【问题描述】：

通常，当页面加载时，浏览器窗口从html 和body 的顶部开始，如下所示：

 ______________________________
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
 _______________________________
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ----- BOTTOM OF CONTENT -------

CSS

html {
  height: 100%;
  max-height: auto;
  width: 100%;
}

body {
  height: 100%;
  min-width: 100%;
  position: relative;
}

然后您必须向下滚动才能查看其余内容。

有没有办法可以操纵 CSS 使浏览器窗口从底部开始？像这样：

 ----- TOP OF CONTENT ----------
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ----- OUT-OF-VIEW CONTENT -----
 ______________________________
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
| BROWSER WINDOW BROWSER WINDOW |
 _______________________________

【问题讨论】：

Reverse Scrolling 的可能重复项
@Himmel 我不认为这是一个有效的解决方案。该答案与滚动条的作用相反，滚动条仍从顶部开始。我希望滚动条正常运行，但从底部开始。
有使用 javascript 的选项，但仅 css 会很困难。
Joe 到目前为止，这不是解决方案，但如果您愿意，它可能是一种解决方法。只需将window.scroll(x, y) 放入正文标记onLoad。我选择了一个大的y 号码，但这可以工作。显然不是CSS。 <body onLoad="window.scroll(0, 5000)">
@m69 用js怎么办？

标签： html css position screen viewport

【解决方案1】：

类似这样的：

function scrollBottom() {window.scrollTo(0, 99999);}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", scrollBottom, false)
else if (window.attachEvent) window.attachEvent("onload", scrollBottom);

content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>

【讨论】：

请注意，没有什么可以阻止任何元素的高度超过 99999 像素。 imo 更优雅的方式是执行类似的操作：document.body.scrollTop = document.body.clientHeight;
确实如此；我只是想让它尽可能简单，我认为 OP 可以判断在他的特定情况下哪个数字是正确的。另一方面，长得离谱的页面通常开始时只有几个屏幕，然后随着您到达底部而扩展，例如 Google 图片搜索或 Facebook。

【解决方案2】：

由于某种原因，m69 的答案对我不起作用。以下是这样做的。

function toBottom()
{
    window.scrollTo(0, document.body.scrollHeight);
}
window.onload=toBottom;

【讨论】：