Question

当我点击我的按钮时，我追加一个新的div。我想，如果窗口的任何部分看不到窗口，滚动直到它显示。

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

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

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

Answer 1

所以如果你使用的是jQuery。

{{1}}

我认为这应该有效。在调用scrollTop函数之前，请确保附加了div。

Answer 2

检查this工作小提琴的解决方案。

您可以使用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相对于当前视口（或当前窗口视图的中心）的位置，可以使用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是另一个小提琴。

Answer 3

如果我理解正确，那么jsfiddle就是你要找的。

我还添加了一个简单的动画，因此文档不会在视口周围跳转。

功能

如果创建了新元素，并且该新元素的一部分位于当前视口下方，则将滚动文档，直到显示视口的底部。反之亦然，如果新元素的一部分位于当前视口之上。

如果新元素在当前视口中完全可见，则不会进行滚动。

所有滚动效果均已动画显示。

可配置的偏移量（保留一些填充而不是滚动到新元素的最边缘）

工作原理

单击该按钮时，会追加新的function isElementAboveViewport(element) { return $(element).offset().top < $(window).scrollTop(); }元素。

if (isElementAboveViewport($('section > div:last-child'))) { ... }

接下来，我们使用以下函数计算出此div是否高于当前视口：

offset

在if语句中：

$('html, body').animate({ scrollTop: $('section > div:last-child').offset().top - offset }, 1000);

如果条件真实，我们滚动！（function isElementBelowViewport(element) { return $(element).offset().top + $(element).height() > $(window).scrollTop() + $(window).height(); }是可配置的 - 在JS小提琴中，我使用了40，这是覆盖视口顶部40px的按钮的高度）

offset

现在，我们检查新元素是否在具有类似功能的当前视口之下：

$('html, body').animate({ scrollTop: $('section > div:last-child').offset().top + $('section > div:last-child').height() - $(window).height() + offset }, 1000);

如果元素在文档中太远，我们滚动！（同样，{{1}}是可配置的）

{{1}}

请告诉我这是您要找的内容和/或如果您对其工作方式有任何疑问。

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

3 个答案: