<!DOCTYPE html>
<html>
<style>
#myDIV { height: 250px;
width: 250px;
overflow: auto;
background: coral;
}
#content { margin:500px;
height: 800px;
width: 2000px;
background: coral;
position: relative;
}
</style>
<body>
<h1>Element 对象</h1>
<h2>scrollIntoView() 方法</h2>
<p>单击按钮可滚动到 id="content" 元素的顶部或底部。</p>
<p>
<button onclick="scrollToTop()">滚动到顶部</button>
<button onclick="scrollToBottom()">滚动到底部</button>
</p>
<div id="myDIV">
<div id="content">
<div style="position:absolute;top:0;">位于顶部的文本</div>
<div style="position:absolute;bottom:0">位于底部的文本</div>
</div>
</div>
<script>
const element = document.getElementById("content");
function scrollToTop() { element.scrollIntoView(true);
}
function scrollToBottom() { element.scrollIntoView(false);
}
</script>
</body>
</html>