jQuery：滚动到元素中心

Question

我正在开发一个 jQuery 函数，点击后可以滚动到指定的 div。目前它会滚动到顶部，我想知道是否有办法让它滚动到 $('.scrollit') 中心，或者通过某个像素值进行偏移？

$(".playbox").on('click', function () {
    $('.scrollit').animate({
        scrollTop: $(this).offset().top
    }, 1000);

- Jeff

---

类似的问题答案在这里：https://dev59.com/62865IYBdhLWcg3wR8ah 我认为这会对你有所帮助。 - Sk Asraf

Answer 1

您可以使用元素的高度。

scrollTop: $(this).offset().top + $(this).height() / 2;

将元素高度的一半加到scrollTop上，即可滚动到元素中心。

- Tushar

---

谢谢Tushar！我最终对你的答案进行了一些修改以适应特定的需求，但它非常有效！最终我使用了scrollTop: $(this).offset().top - $(this).height()。谢谢！ - Jeff

Answer 2

与其他答案相比，有两个主要的不同之处。如果您添加或删除偏移量，这是相关的，因此我用减号替换加号。我使用屏幕尺寸作为参考而不是元素。将滚动动画化并包装在一个函数中是可选的。

function scrollTo (id) {
   $('html,body').animate({
      scrollTop: $("#"+id).offset().top - $(window).height()/2
   }, 1000);
}

- and-bri

Answer 3

我不确定我的用例是否与最初提出的问题完全相同，但在尝试解决我的问题时，我发现了这个问题。

我想要做的是滚动，使得视口的垂直中心与目标元素的垂直中心对齐。

我最终使用的代码如下。这通过将滚动目标偏移视口高度和元素高度之差的一半来实现。

注意：我认为这段代码假定元素小于视口。如果要处理元素大于视口的情况，您可能需要使用绝对值函数或其他方法进行修改。但这对我的用例来说并不必要。

function scrollto (target) {
    document.documentElement.scrollTop = document.body.scrollTop = target.offset().top - (window.innerHeight - target.height()) / 2;
}
scrollto($(this));

- Richard Abey-Nesbit