多个ajax请求，页面滚动时如何让用户查看同一个div

Question

该页面有 3 个输入和 3 个内容区域。如果用户在最后一个输入中输入一个值，则所有 3 个内容区域都会更新并变大。然而，其中 2 个在最后一个输入之上，导致用户观看内容“飞”过屏幕。

如何让用户看到相同的输入，然后优雅地滚动到最后一个内容区域

小提琴Here:

<div id="content1">
  Content 1
</div>
<div id="content2">
  Content 2
</div>

<a href="#" id="videos-link"> CLICK HERE </a>
<div id="content3">
  Content 3
</div>

$(document).ready(function() {
  $('#videos-link').click(function(event) {
    event.preventDefault();

    $('#content3').html('loading');

    $.ajax({
      url: '/echo/js/?js=hello%20world!',
      complete: function(response) {
        var height = (Math.random() * 1000) + 300;
        $('#content1').height(height);
      }
    });

    $.ajax({
      url: '/echo/js/?js=hello%20world!',
      complete: function(response) {
        var height = (Math.random() * 1000) + 300;
        $('#content2').delay(200).height(height);
      }
    });

    $.ajax({
      url: '/echo/js/?js=hello%20world!',
      complete: function(response) {
        var height = (Math.random() * 1000) + 300;
        $('#content3').html('loading').delay(500).height(height).html('finished loading');
        var offsetTop = jQuery("#content3").offset().top - 10;
        $('html,body').animate({
          scrollTop: offsetTop
        }, 1000);

      }
    });


  });

});

在小提琴中，我希望用户继续查看“a”元素，然后在 ajax 请求完成时优雅地滚动到 content3 div。

Answer 1

当content1 和content2 展开时，所有内容都被向下推，所以看起来你是在向上滚动然后向下滚动..

对此没有实际的解决方案，但作为一种解决方法，您可以在每次更改 DOM 中 div 之前的高度时滚动到第三个 <a> 元素。

第 1 步： 存储<a> 标签的relative 偏移量

var relative_offset = $('#videos-link').offset().top - $(window).scrollTop();

您将希望在任何 ajax 响应之前获取此值，因此最好在点击事件的请求中定义 relative_offset。

第 2 步： 更改滚动条

对于第一个和第二个 ajax 响应，您需要将 window 的 scrollTop 更改为 <a> 标记位置 - relative_offset：

//...
$('#content_x').height(height); // offset().op of <a> has changed 
$(window).scrollTop($('#videos-link').offset().top - relative_offset);

最终代码 我还没有测试过，但它应该看起来像这样：

（我可能在某处错过了+ 和-，但我相信这是当前解决问题的方法）

$('#videos-link').click(function(event) {
  event.preventDefault();
  var relative_offset = $('#videos-link').offset().top - $(window).scrollTop();

  $('#content3').html('loading');

  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    complete: function(response) {
      var height = (Math.random() * 1000) + 300;
      $('#content1').height(height);
      $(window).scrollTop($('#videos-link').offset().top - relative_offset);
    }
  });

  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    complete: function(response) {
      var height = (Math.random() * 1000) + 300;
      $('#content2').delay(200).height(height);
      $(window).delay(201).scrollTop($('#videos-link').offset().top - relative_offset); // i set delay to 201 just to be sure it runes after
    }
  });

  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    complete: function(response) {
      var height = (Math.random() * 1000) + 300;
      $('#content3').html('loading').delay(500).height(height).html('finished loading');
      var offsetTop = jQuery("#content3").offset().top - 10;
      $('html,body').animate({
        scrollTop: offsetTop
      }, 1000);

    }
  });


});

相关问题： Stop automatic scrolling on page content change