Question

我在页面加载时使用以下代码顺利滚动到div

$(document).ready(function() {   

      $('html,body').delay(50).animate({scrollTop:jQuery('#3342').position().top-10}, 'slow'); 

});

将页面平滑地滚动到预定义的div id（在这种情况下为div id=3342，但实际的div ID会根据用户点击的按钮而改变）。

问题在于，如果div 3342上方的页面中有任何图像，则滚动完成后，页面会跳转，整个定位滚动无效，因为该内容不再显示在屏幕上。

这是在移动野生动物园btw。我知道Google Chrome最近推出了Scroll锚点，我相信这是我尝试以某种方式重现的功能。

仅供参考，我无法提前知道图像的大小或图像大小的比例。它们是来自网络的随机图像

谢谢！

编辑：我不想改变窗口/加载事件，因为这意味着我必须等待所有图像首先加载，这会在某些页面上大量延迟滚动事件

编辑：图片网址都在源页面上，事后没有ajax加载页面

Answer 1

重复完成：

$(document).ready(function() {   

  var div = jQuery('#3342');
  var complete = false;
  function adjust () {
    if (!complete) {
      $('html,body').delay(50).animate({scrollTop:div.position().top-10}, 'slow', adjust);
    } else {
      $('html,body').delay(50).animate({scrollTop:div.position().top-10}, 'slow');
    }
  }
  adjust();

  $(window).on('load', function () {
    complete = true;
  });


});

在滚动到div时，是否有阻止页面跳转（从加载图像）？

1 个答案: