Какие значения замедления использовать для плавного замедления при остановке прокрутки

Question

У меня есть следующее, которое выполняет плавную прокрутку страницы при нажатии кнопки:

let x = 0;
$("#up").on("click", ()=>{
  x+=100;
  console.log(x);
  $("html, body").animate( { scrollTop: x }, 800);
});

Однако остановка прокрутки довольно резкая и резкая. У меня есть смутное понимание того, что смягчение может сформировать анимацию. Как я могу использовать его, чтобы прокрутка замедлялась до плавного останова?

Answer 1

Библиотека jQuery включает в себя набор предустановок анимации. См .: их документы

Некоторые из них приведены здесь в этой демонстрации: https://matthewlein.com/tools/jquery-easing

Из документов простая анимация может быть добавляется к элементу путем включения опции 'easing' в свойство 'duration' анимации.

Например:

$( "p" ).animate({
  opacity: "show"
}, {
  duration: "slow",
  easing: "easein"
});

В вашем случае это может выглядеть так:

$("html, body")
    .animate( 
        { scrollTop: x }, 
        { duration: 800, easing: "swing"}
    )
;

В библиотеку включены две реализации замедления: linear и swing (по умолчанию).