4

如何使用 jQuery 制作动画？当用户单击 span 时，我正在尝试创建一个平滑的滚动功能p1c1。slimScroll 正在工作，但我不确定如何将动画功能合并到其中。我应该尝试补间吗？

$('.p1c1').on("click", function(){
    var fromTop = $('.p2c1').position().top;
    $("#panel2").slimScroll({ scrollTo: fromTop  });
});

这是我想要做的动画类型，但在我的 slimScroll 面板中：

$('html, body').animate({
    scrollTop: $(".middle").offset().top
}, 2000);

这是 slimScroll 库：https ://github.com/rochal/jQuery-slimScroll/

4

3 回答 3

11

我一直在寻找同样的东西，但找不到现有的解决方案 - 所以我制作了一个简单的 rochal 代码分支。你可以在这里找到它：https ://github.com/edragame/jQuery-slimScroll

我所做的唯一更改是添加一个动画选项，如下所示：

$("#panel2").slimScroll({ scrollTo: fromTop, animate: true });

让我知道这是否有帮助。

于 2013-09-30T17:44:00.230 回答
3

“动画：真”不起作用。

您必须删除 jquery.slimscroll.js 中的“if (isJump)”部分并将其替换为：

if (isJump)
      {
        delta = y;
        var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
        offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
        bar.css({ top: offsetTop + 'px' });
        me.animate(
          { scrollTop: delta + 'px' },
          1200
        );
      }
      if (!isJump){
        me.scrollTop(delta);
      }
于 2013-12-27T18:21:15.227 回答
0

我使用scroll-behavior: smooth;并为我工作得很好。

于 2021-06-30T19:37:04.653 回答