如何使用jQuery为slimScroll设置动画 [英] How to animate slimScroll using jQuery

问题描述

如何使用jQuery为此设置动画？当用户点击范围 p1c1 时，我正在尝试创建一个平滑的滚动功能。 slimScroll正在运行，但我不确定如何将动画功能合并到此中。我应该尝试补间吗？

How can I animate this using jQuery? I'm trying to create a smooth scroll-to function when the user clicks the span p1c1. The slimScroll is working, but I'm not sure how to incorporate an animation function into this. Should I try tweening?

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

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

This is the type of animation I'm trying to do, but within my slimScroll panel:

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

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

Here is the slimScroll library: https://github.com/rochal/jQuery-slimScroll/

推荐答案

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

I was looking for the same thing but couldn't find an existing solution - so I've made a simple fork of rochal's code. You can find it here: https://github.com/edragame/jQuery-slimScroll

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

The only change I made was to add an animate option, like so:

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

如果有帮助请告诉我。

这篇关于如何使用jQuery为slimScroll设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！