Прокрутка к пользовательскому переходу 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's?

Answer 1

Вы не можете использовать переходы CSS3 для управления функцией jQuery. Вы также не можете использовать CSS для анимации полосы прокрутки напрямую, потому что позиция прокрутки не является стилем.

Есть библиотеки, которые имитируют прокрутку, используя преобразования CSS3 (iScrollJS for example), но для перемещения собственной полосы прокрутки вам нужно будет использовать строго JavaScript.

Решение заключается в использовании jQuery Easing library, который позволяет выполнять пользовательские функции ослабления. Он также поставляется с репликами встроенных функций CSS3 easing.