Question

我们目前正在搜索联系人表单，AJAX用于显示表单下方的PHP文件（在同一页面上）的结果。表单的onsubmit属性包含return:false值，以允许AJAX代码完成。

结果显示为“在首屏下方”，我希望重点跳到ID（#peopleResults），但无法管理;相反，它停留在父页面的顶部。

我应该在实际的PHP文件或AJAX调用（到PHP文件）中尝试实现这一点吗？

我已经在PHP文件中尝试了<script>window.location.hash = "peopleResults";</script>并在AJAX调用中引用了results.php#peopleResults，但都没有工作。

这可能吗？我想我试图在按下提交时将#peopleResults附加到URL上（不需要更改URL）......

Answer 1

我已经尝试<script>window.location.hash = "peopleResults";</script>
了

location.hash 包括 # - 在阅读时，以及设置新值时。

所以

window.location.hash = "#peopleResults"

将是正确的方式，告诉浏览器跳转到具有ID（或锚名称）peopleResults的元素。

Answer 2

我想你要实现这一目标，请查看fiddle。

这是在不使用哈希的情况下完成的。因为你只想在Ajax之后查看结果。

通过这种方式，您无需更改URL。

Answer 3

基于对我的评论的回复，看起来你对AJAX部分也有点模糊。来自文档：

$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
})
  .done(function( data ) {
    if ( console && console.log ) {
      //this is where you need to add your data to the div
      //after the data is in the div, scroll to it.
      console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
  });

你可以看到，我添加注释的功能是你需要进行滚动的地方。在你填充div之后（你怎么做），然后只使用滚动到它的学习者学生或phpisuber01：

$("html, body").animate({ scrollTop: $("#peopleResults").scrollTop() }, 1000);

jQuery AJAX文档：https://api.jquery.com/jQuery.ajax/

jQuery scrollTop文档：https://api.jquery.com/scrollTop/

AJAX表单onsubmit：跳转到div

3 个答案: