javascript - JQuery滚动窗口根据其位置显示div

Question

当我点击我的按钮时，我附加了一个新的 div。我希望，如果 div 的任何部分对窗口不可见，请滚动直到它显示。

因此，如果它从窗口中心向上，向上滚动直到看到它的顶部，如果它从中心向下，向下滚动直到看到它的底部。

在我的搜索中，我找到了 https://api.jquery.com/scrollTop/ ，但这似乎不是我所描述的

我只想滚动到足以将其完全显示在屏幕上，而不是总是在顶部

Answer 1

检查 this解决方案的工作 fiddle 。

您可以使用 scrollTop()滚动到任何 div。首先我们需要找到滚动的方向以正确地为 scrollTop() 函数提供值。这可以使用 position() 找到.

$('#button4').click(function() {
    // check if the div lies below the button
    if ($('#div3').position().top - $('#button4').position().top > 0) {
      // in this case we need to add shift
      var shift = $(window).height() - $('#div3').height();
    } else {
      var shift = 0;
    }
    $(window).scrollTop($('#div3').offset().top - shift);
  });

---

或者，如果您希望检查 div 相对于当前视口(viewport)(或当前窗口 View 的中心)的位置，您可以使用 getBoundingClientRect()喜欢:

$('#button4').click(function() {
    // check if the div lies below the viewport
    if ($('#div3')[0].getBoundingClientRect().top > 0) {
        // in this case we need to add shift
      var shift = $(window).height() - $('#div3').height();
    } else {
      var shift = 0;
    }
    $(window).scrollTop($('#div3').offset().top - shift);
  });

Here是备用 fiddle 。