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;
});

我不想使用JQuery的动画，而是按照以下方式使用自定义CSS3过渡：

.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缓动函数的副本。

滚动到自定义CSS3过渡

1 个答案: