滚动到自定义 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;
});

我不想使用 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 过渡

Scroll to with custom CSS3 transition

css

jquery

scrollto