提交后保持滚动位置

Question

我以此为基础建立我的网站。在链接下，Contact我放置了带有PHP验证的联系表单，以检查用户是否正确填写了字段。单击提交按钮后，可以：

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

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

我是该领域的初学者，希望进一步查找任何提示或技巧。

Answer 1

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

当comment.php执行时，它会以#contact附加的 302 重定向进行响应。假设您的页面index.html将重定向到

/index.html#contact

然后，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()，用户将能够为该页面添加书签，并且在重新访问您的网站时将跳转到正确的“页面”。