Jquery滚动顶部动画不会移动到所需位置/向上滚动

Question

我正在开发我的音乐播放器的一项功能，该功能将您在可滚动的父div 中单击的曲目/div 居中。由于某种原因，它并不总是滚动到中心，当我向下滚动并单击较低的曲目时，它会在同一位置疯狂地滚动到顶部。此功能的主要目的是让开始探索曲目的用户不必滚动。它增强了整体用户体验。我怎样才能让它在单击时滚动到单击的轨道并将其垂直居中到父div 的中间？(这也将被添加到下一个和上一个按钮中，如您在演示中看到的那样(

现场演示：http://loopcove.com/playerupdated2020.php?id=30

$(".playbox").on('click', function () {
if (!$(this).hasClass('playboxplaylight') && $(this) !== nowplay) {$('.scrollit').animate({
scrollTop: $(this).offset().top - $(this).height() 
},1000);}

Answer 1

滚动器未滚动到正确位置的原因是您使用的滚动插件。

此插件禁用本机滚动并使用翻译平滑滚动页面。

这使得jQuery的.offset()函数返回错误的值。

获得正确值的解决方案是

$(".playbox").on('click', function () {
// Your if checks here
$('.scrollit').animate({
scrollTop: $(this)[0].offsetTop - $(this).height() 
},1000);
})

但是上面的代码仍然没有完美地居中滚动像素。为此，您必须减去顶栏和底部波段的高度。

$(".playbox").on('click', function () {
// Your if checks here
$('.scrollit').animate({
scrollTop: $(this)[0].offsetTop - $(this).height() - ($('.menu-search-box').height() + $('.play-bar').height())
},1000);
})