提交后保持滚动位置

Question

我用这个作为我网站的基础。 在链接下， Contact我将联系表单与PHP验证联系，以检查用户是否正确填写了字段。 单击提交按钮后，可以：

1. 显示验证消息（例如“抱歉，您的姓名是必填字段”等），或
2. 显示消息“感谢您填写表格”（如果所有字段都填写正确）。

但是，页面然后跳回到第一页，显示“关于”页面。 如果您导航回“联系”页面，您可以看到消息。 这非常烦人。

我的尝试示例可以在这里找到：

我是这个领域的初学者，任何提示或小费的地方都会非常感激。

Answer 1

我会重定向到原始网址，在网址上添加一个哈希值，告诉您的网站去哪里。

当comment.php正在执行时，它将使用#contact附加的302重定向进行#contact 。 假设您的网页是index.html它会重定向到

/index.html#contact

关于PHP中的重定向： http ： //php.net/manual/en/function.header.php

在index.html您将检查哈希并执行单击链接时执行的操作：

window.onload = function(){
   if (location.hash === "contact") {
      goto('#contact', this);
   }
}

如果页面是通过与注释处理程序相同的页面传递的，例如index.php您还可以将表单发布到index.php并附加#contact 。 然后，您将不需要在PHP中重定向。

<form action="/index.php#contact" method="POST" ...>
  ...
</form>

---

第一个好处：您可以在不使用Javascript的情况下构建您的页面（对使用脚本阻止程序的访问者很有用）。 页面容器将是块元素，一个在另一个之下。 然后， #<name>将自动跳转到具有id="<name>"属性的容器。 您需要添加一个CSS类，以便在onload事件中并排显示页面容器。

第二个好处：如果您检查hash值是否正确，然后将其直接传递给您的goto() ，用户将能够为该页面添加书签，并且在重新访问您的站点时将跳转到右侧“页面”。

Answer 2

感谢所有帮助我完成此主题的人。 我找到了一个很棒的教程，如何在这里提交一个带有AJAX的表单： http ： //demos.9lessons.info/contact/index.html我用过这段代码就行了！ 结果在这里： http： //webinspiration.net78.net/CodepenOriginal%20Contact/问候，Signe