javascript - 调用 $.ajax 正在改变我的窗口滚动？

Question

我遇到了一个非常奇怪的错误...一旦我的 JS 代码从 jQuery $.ajax 调用进入我的 success 函数，我的窗口上的滚动位置跳到页面底部。这对我来说是一个真正的问题，因为我正在处理移动页面加载，并且不想要这种不和谐的动画。

我通过调用 console.debug($(window).scrollTop()); 调用我的代码来追踪它，并且它始终从 0 发生变化(什么在进入成功回调之后，在执行任何回调代码之前，它应该是数百个(坏)的数字。

我在 Safari 和 Chrome 中遇到了同样的问题，两者的用户代理都设置为 iOS 5。

<小时/>

这是问题区域的片段:

  console.debug($(window).scrollTop()); //= 0
  // store the user's direction
  M.advance = args.advance;

  console.debug($(window).scrollTop()); //= 0
  // setup the existing page for a load event
  M.init_change();

  console.debug($(window).scrollTop()); //= 0
  $.ajax({
    url: args.url,
    success: function(resp) {
      console.debug($(window).scrollTop()); //= 616
      var $resp = $(resp);

      console.debug($(window).scrollTop()); //= 616
      // cycle through and get the elements we want
      for(var i = 0, l = $resp.length; i < l; i++) {
        var $node = $($resp[i]);
        if($node.is('nav[data-role="top-nav"]]')) M.current.nav = $node;

        // ...

有人知道这是怎么回事吗？我已经无计可施了……

<小时/>

在此处查看完整文件:https://gist.github.com/1499965

Answer 1

假设我对正在发生的事情的评论是正确的:

在 $.ajax success 函数中，当您知道正在重建页面并希望将滚动位置设置为顶部时，请执行以下操作:

$("html").scrollTop(0);

想想看，即使我错了，这也可能会解决问题。

更新:您可以将其放在 $.ajax 的“完成”事件中，该事件在 ajax 调用中的成功和错误事件之后触发。

$.ajax({
        url: args.url,
        success: function(resp) {
          // your success code
        },
        error: function() { console.error('something went wrong'); },
        complete: function() {
             window.scrollTo(0,0); // or the $('html').scrollTop(0); from before
      });

测试思路:默认情况下，$.ajax 会异步触发，因此在调用时会执行其他操作。为了排除随后发生的其他事情重置滚动位置的可能性，您可以将 async: false, 放入 $.ajax 代码中。