我想创建一个比实际屏幕大的主体，然后我想使用类似 scrollTo() 的方法将屏幕移动到 div 的位置，我希望该 div 在屏幕上居中。
HTML
<div id="first">
First Step
</div>
<div id="second">
Second Step
</div>
<div id="menu">
<button onclick="scrollFirst()">
first step
</button>
<button onclick="scrollSecond()">
second step
</button>
</div>
CSS
body {
height: 1000px;
width: 1000px;
position: relative;
}
#first {
padding: 30px;
background: #000;
color: #fff;
position: absolute;
left: 350px;
top: 350px;
}
#second {
padding: 30px;
background: #000;
color: #fff;
position: absolute;
left: 550px;
top: 750px;
}
JS
function scrollFirst() {
window.scrollTo(350, 350);
}
function scrollSecond() {
window.scrollTo(550, 750);
}
最佳答案
您没有正确链接您的 html 和 .js 文件。因此，您的功能无法正常工作。
body {
height: 1000px;
width: 1000px;
position: relative;
}
#first {
padding: 30px;
background: #000;
color: #fff;
position: absolute;
left: 350px;
top: 350px;
}
#second {
padding: 30px;
background: #000;
color: #fff;
position: absolute;
left: 550px;
top: 750px;
}
#menu {
position: fixed;
left: 20px;
bottom: 20px;
}<!DOCTYPE html>
<html>
<body>
<div id="first">
First Step
</div>
<div id="second">
Second Step
</div>
<div id="menu">
<button onclick="scrollFirst()">
first step
</button>
<button onclick="scrollSecond()">
second step
</button>
</div>
<script>
function scrollFirst() {
window.scrollTo(350, 350);
}
function scrollSecond() {
window.scrollTo(550, 750);
}
</script>
</body>
</html>关于javascript - 如何在 JavaScript 中使用 ScrollTo()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59168235/