滚动到自定义 CSS3 过渡

Question

我有一段代码使用标准的 jQuery 驱动动画从页面的一个部分平滑地滚动到另一个部分（以避免页面锚点中的页面跳转迷失方向）。这里是：

// Scroll to 
$('.scrollto').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 800 );
   return false;
});

我想使用自定义 CSS3 转换，而不是使用 JQuery 的动画，如下所示：

.scrollto {
  -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
     -moz-transition-timing-function: cubic-bezier(.77,0,.175,1);
      -ms-transition-timing-function: cubic-bezier(.77,0,.175,1);
          transition-timing-function: cubic-bezier(.77,0,.175,1);
}

如何将两者合并在一起并确保使用 CSS3 过渡而不是 jquery？

Answer 1

您不能使用 CSS3 过渡来控制 jQuery 函数。也不能直接使用 CSS 为滚动条设置动画，因为滚动位置不是样式。

有些库通过利用 CSS3 转换 (iScrollJS for example) 来模拟滚动，但要移动本机滚动条，您需要严格使用 JavaScript。

解决方案是使用jQuery Easing library，它允许自定义缓动函数。它还带有内置 CSS3 缓动功能的副本。