javascript - 将元素带到页面顶部，即使页面不滚动

Question

背景:

假设您有一个简单的页面，其中只有一个 Logo 、一个标题和一个段落

<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>

是这样的

该页面显然不会有垂直溢出/滚动条，即使是微型移动设备，更不用说计算机了。

问题

除非有人向上滚动，否则如何将标题移至屏幕左上角并将 Logo 移出焦点？开放使用任何 JavaScript 库和任何 CSS 框架

尝试:

1. 尝试使用 anchor ，但只有当页面已经有滚动条并且 anchor 不在焦点时它们才有效。
2. 尝试过 window.scrollTo但这也要求页面已经滚动
3. 尝试过 $("html, body").animate({ scrollTop: 90}, 100);但是当页面没有溢出时这也不起作用

注意事项:

请注意，添加一些额外的 <br/>引发溢出不是解决方法，可以这样做，但这是一个非常普通的解决方法

为什么需要它？

它是针对移动设备的表单，简单的要求是将表单的第一个字段带到页面顶部并隐藏 Logo (如果他们想看到它可以向上滚动)所以它不会引起注意离开。不使用 jQueryMobile 来完成这个特定任务。

Answer 1

如果您希望用户能够向上滚动并看到 Logo ，那么 Logo 必须位于 body 标签的顶部边界内，因为该标签之外的任何内容都将不可见.这意味着您不能使用负边距或类似的抵消。实现此目的的唯一方法是让页面滚动到 body 标记顶部边界内的所需位置。您可以将此事件的时间设置为一毫秒，但加载时页面中仍会出现“跳转”。因此，逻辑是:首先确保页面足够长以滚动到正确的位置，然后再滚动到那里。

//Change the jQuery selectors accordingly

//The minimum height of the page must be 100% plus the height of the image
$('body').css('min-height',$(document).height() + $('img').height());

//Then scroll to that location with a one millisecond interval
$('html, body').animate({scrollTop: $('img').height() + 'px'}, 1);

View it here.

或者，您可以首先加载没有图像的页面。然后您的表单字段将与 document 的顶部齐平。然后您可以在顶部创建元素并再次滚动页面。不过，这是做同样事情的一种循环方式。而且页面仍会“跳转”，这是没有办法解决的。