javascript - 提交时跳转到锚点

Question

提交表单后，我想跳到锚标记。这可能吗？

我的简化形式看起来像这样

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

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

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

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

Answer 1

您可以只创建一个 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>

Answer 2

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

response.sendRedirect("customerEdit#myAnchor");

或者在 JS 中：

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

HTML 表单 POST 当然是到服务器的往返。所以你不能在旧页面上滚动，你必须滚动或（通过重定向）到新页面上的锚点。

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

Answer 3

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

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

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

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