Question

我有一个页面使用POST从mySQL中检索数据。然而，这令人恼火，因为如果我向下滚动并点击执行POST的内容，它会将页面一直踢回到顶部。有人知道一些javascript / jquery插件可以解决这个问题吗？

Answer 1

好吧，如果您执行AJAX POST并将页面内容替换为AJAX POST产生的内容，则此滚动效果不会出现问题。

请记住，此操作可能对用户来说无缝（无浏览器加载）。

假设你有一个表格：

<form id="some_form" action="myphp.php">
    <input name="something" value="foo"/>
    <input name="something_else" value="bar" /> 
</form>

和jQuery：

$("#some_form").submit(function() {
   var url = $(this).attr("action");
   var form_data = $(this).serialize();
   // post the same data via an AJAX call
   $.post(url, form_data, function(data) {
      // replace the contents from the received response
      $("html").html(data);
   });
   // disable the default form submit behavior
   return false;
});

Answer 2

你尝试Jumping Inside Pages了吗？

和另一个例子How To Link to a Specific Spot on a Page

<div id="whatever-you-want-to-call-it">
    The content of your div here.
</div>

以及到达那一点的网址

http://www.pagename.html#whatever-you-want-to-call-it

Answer 3

使用e.preventDefault（）更清楚;用jQuery（像Uku Loskit建议的那样）。他的代码中也有一个错误（它不起作用）所以我修复了它。

这是他改变的代码：

<form id="some_form" action="myphp.php"">
    <input name="something" value="foo"/>
    <input name="something_else" value="bar" /> 
</form>

和jQuery：

$("#some_form").submit(function(e) { // e = event object, it has many usefull properties and methods
   e.preventDefault();
   var url = $(this).attr("action");
   var form_data = $(this).serialize();
   // post the same data via an AJAX call
   $.post(url, form_data, function(data) {
      // replace the contents from the received response
      $(document).html(data);
   });
});

顺便说一句，如果你想留在同一个页面（没有重装，不要更改网址），没有办法如何在没有javascript的情况下实现。如果它像分页一样使用，那么你可以在url之后添加＃some-id，然后将id'some-id'添加到页面加载时应该位于顶部的项目。这将很好 - 不需要j。

Answer 4

尝试使用scrollTop：

$("#some_form").submit(function() {
   var url = $(this).attr("action");
   var form_data = $(this).serialize();
   var currentScrollTop = $('body').scrollTop();

   // post the data via an AJAX call
   $.post(url, form_data, function(data) {
      // replace the contents from the received response
      $(document).html(data);
      $('body').scrollTop(currentScrollTop);
   });

   // disable the default form submit behavior
   return false;
});

在POST上禁用滚动

4 个答案: