提交后保持滚动位置

Question

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

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

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

我的尝试示例可以找到here：

我是这个领域的初学者，非常感谢任何提示或提示。

Answer 1

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

当comment.php正在执行时，它将以附加#contact的302重定向进行响应。假设您的网页是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()，用户就可以为该页面添加书签，重新访问您的网站时会跳到右侧＆＃34;页面＆＃34;

Answer 2

感谢所有帮助我完成此主题的人。 我在这里找到了一个很棒的教程如何使用AJAX提交表单：http://demos.9lessons.info/contact/index.html 我使用这个代码，它的工作原理！结果如下： http://webinspiration.net78.net/CodepenOriginal%20Contact/ 此致，Signe