时间戳

首页 > 解决方案 > Jquery滚动顶部动画不会到达所需的位置/向上滚动

jquery - Jquery滚动顶部动画不会到达所需的位置/向上滚动

问题描述

我正在开发我的音乐播放器的一项功能，该功能将您在可滚动父 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);}

标签： jqueryhtmlcss

解决方案

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

该插件禁用原生滚动并使用翻译平滑滚动页面。

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

获得正确值的解决方案是

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

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

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

推荐阅读