我正在尝试以编程方式非常顺利地将卡片（第三张）移动到视口
onclick我显然可以管理瞬时移动（但不是平滑的移动），或者不移动到视口顶部的平滑移动。将不胜感激任何指导：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Center the box initially */
body {}
.container {
position: relative;
margin-top: 10%;
}
.card {
width: 100px;
height: 200px;
margin-top: 5%;
left: 50%;
background-color: #3498db;
transform: translate(-50%, -50%);
position: relative;
/* Ensure proper positioning */
transition: margin-top 5s ease;
/* Add transition effect */
}
#myBox {
cursor: pointer;
/* Show pointer cursor on hover */
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="container">
<h4><b>John E</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<div class="container">
<h4><b>John F</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card" id="myBox" onclick="moveBox()">
<div class="container">
<h4><b>John G</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<div class="container">
<h4><b>John H</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</div>
<script>
function moveBox() {
const box = document.getElementById('myBox');
// Move the box to the top of the screen
box.style.marginTop = '0';
}
</script>
</body>
</html>所以，你说将卡片移动到视口的顶部，这可能意味着一些事情（绝对定位元素并移动元素，将视口滚动到元素）。这会滚动到卡片。这是您要找的吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Center the box initially */
body {}
.container {
position: relative;
margin-top: 10%;
}
.card {
width: 100px;
height: 200px;
margin-top: 5%;
left: 50%;
background-color: #3498db;
transform: translate(-50%, -50%);
position: relative;
/* Ensure proper positioning */
transition: margin-top 5s ease;
/* Add transition effect */
}
#myBox {
cursor: pointer;
/* Show pointer cursor on hover */
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="container">
<h4><b>John E</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<div class="container">
<h4><b>John F</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card" id="myBox" onclick="moveBox()">
<div class="container">
<h4><b>John G</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<div class="container">
<h4><b>John H</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</div>
<script>
function moveBox() {
const box = document.getElementById('myBox');
const bounding = box.getBoundingClientRect()
window.scrollTo({
top: bounding.y + window.scrollY,
left: 0,
behavior: "smooth",
})
}
</script>
</body>
</html>