JSFiddle - React, Tailwind, and code Playground
HTML
<a id="click" href="#two">Click<a>
<div style="height: 500px;"></div>
<div id="two" style="height: 50px;background-color: black;"></div>
<div style="height: 1000px;"></div>
<a id="click2" href="#two">Click<a>
JavaScript
function easeOut(timing,func) {
return 1 - func(1 - timing);
}
// makeEaseOut "Отразит" функцию
function bounce(timeFraction) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (timeFraction >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
}
}
}
// bounce - функция
function circ(timeFraction) {
return 1 - Math.sin(Math.acos(timeFraction))
}
// circ - Нужная тебе функция
var duration = 1000;//Время в течении которого продолжается анимация в миллисекундах
document.getElementById('click2').onclick = document.getElementById('click').onclick = function(){
var scTop = window.pageYOffset,
hash = this.href.replace(/[^#]*(.*)/, '$1'),
elemToScroll = document.querySelector(hash).getBoundingClientRect().top;
var start = performance.now();
requestAnimationFrame(step);
function step(time){
var per = (time - start) / duration;
if(per > 1) per = 1;
var progress = easeOut(per,circ);
//var progress = easeOut(per,bounce); // Попробуй и это
window.scrollTo(0,scTop + elemToScroll * progress);
if(per < 1){
requestAnimationFrame(step);
} else {
window.scrollTo(0,elemToScroll+scTop);
location.hash = hash;
}
}
return false;
}