背景:
<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangelogo1.png"> <h1>Foo Bar</h1> <p>ABC12345</p>
这是这样的
该页面显然不会有垂直溢出/滚动条,几乎甚至是小型移动设备,更不用说计算机了.
题
除非有人向上滚动,否则如何将该标题带到屏幕的左上方并将徽标移出焦点?打开使用任何JavaScript库和任何CSS框架
尝试:
>尝试使用锚点,但只有当页面已经有滚动条并且锚点失焦时它们才起作用.
>尝试了window.scrollTo但这也要求页面已经滚动
>尝试$(“html,body”).animate({scrollTop:90},100);但是当页面没有溢出时,这也不起作用
笔记:
请注意,添加一些额外的< br />诱导溢出不是要走的路,可以这样做,但这是一个非常普通的解决方法
为什么需要?
它用于移动设备的表单,简单的要求是将表单的第一个字段放在页面顶部并隐藏徽标(如果他们希望看到它,可以向上滚动),这样就不会引起注意.不使用jQueryMobile执行此特定任务.
解决方法
如果您希望用户能够向上滚动并查看徽标,则徽标必须位于正文标记的顶部边界内,因为该标记之外的任何内容都将无法查看.这意味着您不能使用负边距或偏移.实现此目的的唯一方法是让页面滚动到body标签顶部边界内的所需位置.您可以将此事件的时间设置为1毫秒,但加载时页面中仍会有“跳转”.因此,逻辑是:首先确保页面足够长以滚动到正确的位置,然后滚动到那里.
//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);
或者,您可以首先加载没有图像的页面.然后,您的表单字段将与文档顶部齐平.然后,您可以在顶部创建元素,同样再次滚动页面.尽管如此,这是一种做同样事情的圆润方式.页面仍然会“跳跃”,没有办法解决这个问题.