捕捉锚点动画

Question

我正在使用great plugin在指定距离内滚动时捕捉到锚点。但是，我想为此效果添加动画，但似乎无法使其工作。

以下是我能提出的最佳代码：

<script type="text/javascript">
    $(document).ready(function() {
      $(document).scrollsnap({
        snaps: '.snap',
        proximity: 200,
        }, 300,"easeInOutExpo");
    });
</script>

我该如何做到这一点？

Answer 1

查看code，只要您使用元素而不是文档本身实例化插件，它就会尝试为快照设置动画：

$(scrollingEl).animate({scrollTop: (matchingEl.offsetTop + settings.offset)}, 200);

因此，我建议使用对页面顶级元素的引用来实例化它。

从上面可以看出，持续时间和缓动是硬编码的，但是修改插件代码很容易，如果需要，可以通过插件设置动态设置这些属性。