html jQuery:滚动到元素的中心

gzszwxb4  于 2023-03-27  发布在  jQuery
关注(0)|答案(3)|浏览(130)

我正在开发一个jQuery函数,它可以在点击时滚动到div。现在它会滚动到顶部,我想知道他们是否有一种方法可以让它滚动到$('.scrollit')的中心而不是顶部,或者可能是一种方法来偏移它一些像素量?

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

4jb9z9bj1#

可以使用元素的高度。

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

将元素高度的一半添加到scrollTop以滚动到元素的中心。

ttygqcqt

ttygqcqt2#

有两个主要的区别,以其他答案。它的相关,如果你添加或删除偏移量,所以我交换了加号与。我使用屏幕大小作为参考,而不是元素。动画滚动和 Package 在一个功能是可选的。

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

bvpmtnay3#

不确定我的用例是否与问题最初要求的相同,但我在试图解决我的用例时发现了这个问题。
我想做的是滚动,使视口的垂直中心与目标元素的垂直中心对齐。
我最终使用的代码如下所示,它的工作原理是将滚动目标偏移视口高度和元素高度之差的一半。
注意:我认为这段代码假设元素比viewport小。为了处理元素比viewport大的情况,你可能需要使用绝对值函数或其他东西来修改它。这对我的用例来说不是必需的。

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

相关问题