Question

我希望在提交表单后跳转到锚标记。这可能吗？

我的简化表格看起来像这样

  <form onsubmit="searchFunc()">
    <input type="text" value="Search"  />
</form>

我希望它跳转到锚点或div（理想）

<a name="myAnchor"></a>

<div id="myAnchor"></div>

Answer 1

返回HTML响应，重定向到最后带有#myAnchor的URL;或者在页面中嵌入一些Javascript，它将滚动/聚焦到所需的部分。

response.sendRedirect("customerEdit#myAnchor");

或者在JS中：

$(document).ready( function(){
  var scrollToElement = $("#someElement");
  $(window).scrollTop( scrollToElement.offset().top);
});

HTML表单POST当然是服务器的往返。因此，您无法在旧页面上滚动，您必须滚动或转到（通过重定向）到新页面上的锚点。

如果你使用AJAX发布，你当然会留在现有页面上。可以做任何你想做的事。但那是一条不同的鱼。

Answer 2

表单是否已提交给服务器并重新加载页面？

如果没有，并且您正在使用jQuery，请在处理完表单后将其粘贴：

 $('html, body').animate({
     scrollTop: $("#myAnchor").offset().top
 });

或者，您可以在加载结果页面后使用相同的脚本，或使用jQuery AJAX使用$.ajax或$.post和$("form").serialize提交表单。

Answer 3

您可以创建一个DOM锚元素数组，并从该数组中获取第一个项目，也是该页面上的第一个锚标记。

<script type="text/javascript">
function get_anchor(){
   var anchors = document.getElementsByTagName("a");
   var first_anchor = anchors[0];
   // Do something with the anchor we've now stored as a variable
   return first_anchor.text;
}
</script>




<form onsubmit="get_anchor()">
    <input type="text" name="somename">
    <input type="submit">
</form>

在提交时跳转到锚点

3 个答案: