我有一段代码使用标准的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?

最佳答案

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

有一些库可以利用CSS3转换(iScrollJS for example)模拟滚动,但是要移动本机滚动条,则需要使用严格的JavaScript。

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

10-05 20:58
查看更多