分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 即使页面不滚动,也会将元素置于页面顶部，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

背景：

假设您有一个简单的页面,其中包含徽标和标题以及一个段落

<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);

View it here.

或者,您可以首先加载没有图像的页面.然后,您的表单字段将与文档顶部齐平.然后,您可以在顶部创建元素,同样再次滚动页面.尽管如此,这是一种做同样事情的圆润方式.页面仍然会“跳跃”,没有办法解决这个问题.