I've watched this tutorial https://www.youtube.com/watch?v=oUSvlrDTLi4 and I was doing the same thing as here, I only replaced var to let with ES6 standard.
function scroll(target, duration = 1000) {
target = document.querySelector(target) + window.scrollY;
let targetPos = terget.getBoundingClientRect().top;
let startPos = window.pageYOffset;
let distance = targetPos - startPos;
let startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
let timeElapsed = currentTime - startTime;
let run = ease(timeElapsed, startPos, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a {
width: 100%;
height: 100vh;
background: green;
}
.b {
width: 100%;
height: 100vh;
background: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="a">
<h1 onclick="scroll('.b', 1000)">Scroll</h1>
</div>
<div class="b">
<h1 onclick="scroll('.a', 1000)">Scroll</h1>
</div>
</body>
</html>However, it doesn't seem to work.