DevEd教程中的滚动功能不起作用

我看过本教程https://www.youtube.com/watch?v=oUSvlrDTLi4我在做和这里相同的事情，我只是用ES6标准替换了var。

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>

然而，它似乎不起作用。

将函数名称更改为与window.scroll不冲突
CCD_ 2应该是元素本身或者CCD_
target在函数的第二行拼写错误

function myScroll(target, duration = 1000) {
target = document.querySelector(target);
let targetPos = target.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);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.a {
width: 100%;
height: 100vh;
background: green;
}

.b {
width: 100%;
height: 100vh;
background: yellow;
}
</style>
</head>
<body>
<div class="a">
<h1 onclick="myScroll('.b', 1000)">Scroll</h1>
</div>
<div class="b">
<h1 onclick="myScroll('.a', 1000)">Scroll</h1>
</div>
</body>
</html>

相关内容

最新更新

热门标签：