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

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

现场演示：

---

您的滚动条没有滚动到正确位置的原因是您正在使用的滚动插件。

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

这使得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);
})

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