谷歌浏览器中的奇怪行为（提交表单后，它转到页面底部）答案

【问题标题】：Weird behavior in Google chrome (After submitting a form, it goes to the bottom of the page)谷歌浏览器中的奇怪行为（提交表单后，它转到页面底部）
【发布时间】：2014-11-05 04:47:53
【问题描述】：

我有模板设计。一切正常，除非我提交表单。当服务器响应（同一页面）时，它将转到页面底部。如果整个页面大于屏幕的高度，就会发生这种情况。

示例（如果整个页面小于屏幕高度）：
- 提交表单，服务器响应相同的页面，然后页面停留在顶部。
示例（如果整个页面大于屏幕高度）：
- 提交表单，服务器响应相同的页面，然后页面转到底部。

我已禁用 javascript（删除了 <script> 标签）。它只发生在 Chrome 中。

我在firefox和IE中测试过，提交表单后页面会停留在顶部。

.......

另外，如果我在内容之前放一个空的<script> </script> 标签，就和这个完全一样。该页面（在 Chrome 中）将保持在顶部。我假设它必须与 Chrome 如何呈现页面有关。

如果没有<script> 标签，Chrome 会主动渲染页面。如果内容中某处有<script> 标签，它会以更慢或不同的方式呈现它。

.......

另外，我使用的是 Symfony2（一个 PHP 框架），每次在 dev 模式下都会发生这种情况。当我切换到prod 模式（css 和 js 被编译和合并）时，它很少发生。

我通常会说问题出在 CSS/HTML 布局上，但只发生在 Chrome 中，如果页面及时（快速）提供，问题就会消失（页面停留在顶部）。

我的问题是：这是一个已知问题吗？它可以相对容易地修复吗？还是我应该祈祷页面加载速度很快，这样问题就不会发生？

Chrome 版本：38.0.2125.111（64 位）

如果您需要更多详细信息，我很乐意提供。提前致谢

编辑： 服务器以dev 和prod 模式响应同一页面。不同之处在于prod 模式下，它针对生产环境进行了优化。 CSS/JS 被合并和编译，使页面加载更快。

【问题讨论】：

我可以建议我们使用更好的问题标题吗？
@Kolban 当然。你有什么建议？我用谷歌搜索，我什么也没找到。可能我选错词了。
听起来像是跳转到未知锚点时的页面跳转行为。比如，如果你使用<a href="#" 并且不覆盖点击处理程序，Chrome 会跳转到页面底部。
验证页面上的 HTML。
我还以为是锚的问题。你是什么意思覆盖点击处理程序？我已经删除了模板使用的所有脚本。此外，它只发生在dev 模式下（完全相同的页面）。 dev模式，由于是调试，页面加载较慢。

标签： javascript jquery html css google-chrome

【解决方案1】：

如果有人遇到这种情况，这是我的解决方案：

确保缩小/丑化、编译/合并 CSS。使用激进的缓存。因此，Chrome 不会在没有必要的 CSS 样式的情况下呈现页面。

在内容的某处使用<script> </script> 标签是一种黑客行为。

我会推荐使用 jquery：

$('html,body').animate({scrollTop: 0}, 'slow');

只有在提交表单后您没有重定向（表单有错误）时才会出现此问题。如果出现表单错误，您可能会显示消息 div 警报，因此您可以使用该脚本滚动/动画到该 div 元素。

【讨论】：