Управление скоростью скрола по якорям?

Question

[Alexfixer]

Какие способы есть управления скоростью прокрутки по якорям, стандартный scroll-behavior: smooth; в css не подходит, хотелось бы управлять скоростью. Может npm какие-то есть?

Нашёл вот такой вот https://github.com/cferdinandi/smooth-scroll , но работает странно...
Ставлю скорость 300, в итоге после нажатия какая то пауза происходит и потом он скролит к якорю...

Answer 1

[Сергей Канаев]

Можно использовать jquery
https://www.w3schools.com/howto/tryit.asp?filename...

...
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });

В примере по ссылке число 800 - скорость анимации

-----------------------

https://javascript.info/js-animation

animate({
  duration: 1000,
  timing(timeFraction) {
    return timeFraction;
  },
  draw(progress) {
    window.scrollTo({
      top: progress * 100, // всесто 100 устанавить позицию хеша +/- начальную позицию
      left: progress * 100,
      behavior: 'smooth'
    });
  }
});

Нашел инфу, где можно сделать функцию анимации на чистом js. Остальное, думаю, можешь сам добыть - ивенты на клик итп

Comments

[Alexfixer]

а есть вариант на чистом js?

[Сергей Канаев]

https://javascript.info/js-animation

animate({
  duration: 1000,
  timing(timeFraction) {
    return timeFraction;
  },
  draw(progress) {
    window.scrollTo({
      top: progress * 100, // всесто 100 устанавить позицию хеша +/- начальную позицию
      left: progress * 100,
      behavior: 'smooth'
    });
  }
});

Нашел инфу, где можно сделать функцию анимации на чистом js. Остальное, думаю, можешь сам добыть - ивенты на клик итп

Answer 2

[Nik Faraday]

https://qna.habr.com/q/1236036

Comments

[Alexfixer]

я же написал в описании css scroll-behavior: smooth; не подходит