我正在开发一个jQuery函数,它可以在点击时滚动到div。现在它会滚动到顶部,我想知道他们是否有一种方法可以让它滚动到$('.scrollit')的中心而不是顶部,或者可能是一种方法来偏移它一些像素量?
$('.scrollit')
$(".playbox").on('click', function () { $('.scrollit').animate({ scrollTop: $(this).offset().top }, 1000);
4jb9z9bj1#
可以使用元素的高度。
scrollTop: $(this).offset().top + $(this).height() / 2;
将元素高度的一半添加到scrollTop以滚动到元素的中心。
ttygqcqt2#
有两个主要的区别,以其他答案。它的相关,如果你添加或删除偏移量,所以我交换了加号与减。我使用屏幕大小作为参考,而不是元素。动画滚动和 Package 在一个功能是可选的。
function scrollTo (id) { $('html,body').animate({ scrollTop: $("#"+id).offset().top - $(window).height()/2 }, 1000); }
bvpmtnay3#
不确定我的用例是否与问题最初要求的相同,但我在试图解决我的用例时发现了这个问题。我想做的是滚动,使视口的垂直中心与目标元素的垂直中心对齐。我最终使用的代码如下所示,它的工作原理是将滚动目标偏移视口高度和元素高度之差的一半。注意:我认为这段代码假设元素比viewport小。为了处理元素比viewport大的情况,你可能需要使用绝对值函数或其他东西来修改它。这对我的用例来说不是必需的。
function scrollto (target) { document.documentElement.scrollTop = document.body.scrollTop = target.offset().top - (window.innerHeight - target.height()) / 2; } scrollto($(this));
3条答案
按热度按时间4jb9z9bj1#
可以使用元素的高度。
将元素高度的一半添加到scrollTop以滚动到元素的中心。
ttygqcqt2#
有两个主要的区别,以其他答案。它的相关,如果你添加或删除偏移量,所以我交换了加号与减。我使用屏幕大小作为参考,而不是元素。动画滚动和 Package 在一个功能是可选的。
bvpmtnay3#
不确定我的用例是否与问题最初要求的相同,但我在试图解决我的用例时发现了这个问题。
我想做的是滚动,使视口的垂直中心与目标元素的垂直中心对齐。
我最终使用的代码如下所示,它的工作原理是将滚动目标偏移视口高度和元素高度之差的一半。
注意:我认为这段代码假设元素比viewport小。为了处理元素比viewport大的情况,你可能需要使用绝对值函数或其他东西来修改它。这对我的用例来说不是必需的。