在提交表单时跳转到锚点

Question

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

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

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

，我希望它跳转到锚或DIV（理想）

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

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

Answer 1

返回HTML响应，或者重定向到URL以一个#myAnchor结束;或者在页面中嵌入一些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>