3種情況，直接上代碼
1, scrollTo(x, y) 最爲方便快捷。
// 1, scrollTo(x, y)
<!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;
}
.component-wrapper {
position: absolute;
width: 100%;
overflow: auto;
background-color: aqua;
}
.target-box {
width: 100%;
height: 200px;
background: blue;
}
.other-box {
width: 100%;
height: 800px;
background: burlywood;
}
#btn {
width: 100%;
height: 80px;
position: fixed;
left: 0;
bottom: 0
}
</style>
</head>
<body>
<div id="app">
<div class="component-wrapper">
<div class="other-box">其他元素</div>
<div id='target' class="target-box">目標元素</div>
<button type="button" id="btn">點擊按鈕目標元素 回到頂部</div>
</div>
</div>
</body>
<script>
//
document.getElementById("btn").onclick = function() {
window.scrollTo(0, document.documentElement.scrollHeight) // 設置滾動條具體位置，如果父元素設置絕對定位,overflow: auto;，不起作用
}
</script>
</html>
2, scrollTop() 父元素設置絕對定位，並且設置overflow: auto使用這個
2, scrollTop()
<!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;
}
.component-wrapper {
position:absolute;
top:0;bottom:0;
left:0;
right:0;
overflow: auto;
background-color: aqua;
}
.target-box {
width: 100%;
height: 200px;
background: blue;
}
.other-box {
width: 100%;
height: 800px;
background: burlywood;
}
#btn {
width: 100%;
height: 80px;
position: fixed;
left: 0;
bottom: 0
}
#otherBox {
width: 100%;
height: 980px;
background-color: coral;
}
</style>
</head>
<body>
<div id="app">
<div id='component' class="component-wrapper">
<div class="other-box">其他元素</div>
<div id='target' class="target-box">目標元素</div>
<div id='otherBox'>其他底下元素</div>
<button type="button" id="btn">點擊按鈕目標元素 回到頂部</div>
</div>
</div>
</body>
<script>
//
let boxWrapper = document.getElementById('component')
let target = document.getElementById('target')
document.getElementById("btn").onclick = function() {
// boxWrapper.scrollTop = target.getBoundingClientRect().top // 目標元素滾動到頂部 父元素必須絕對定位overflow: auto 或者overflow:
boxWrapper.scrollTop = 0 // 目標元素滾動到低部
}
</script>
</html>
3, scrollIntoView()， 一般用在沒有滾動條的情況，父元素設置絕對定位，並且overflow: hidden, 可以使用這個。
3, scrollIntoView()
<!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;
}
.component-wrapper {
position:absolute;
top:0;bottom:0;
left:0;
right:0;
overflow: auto;
background-color: aqua;
}
.target-box {
width: 100%;
height: 200px;
background: blue;
}
.other-box {
width: 100%;
height: 800px;
background: burlywood;
}
#btn {
width: 100%;
height: 80px;
position: fixed;
left: 0;
bottom: 0
}
#otherBox {
width: 100%;
height: 980px;
background-color: coral;
}
</style>
</head>
<body>
<div id="app">
<div id='component' class="component-wrapper">
<div class="other-box">其他元素</div>
<div id='target' class="target-box">目標元素</div>
<div id='otherBox'>其他底下元素</div>
<button type="button" id="btn">點擊按鈕目標元素 回到頂部</div>
</div>
</div>
</body>
<script>
//
let boxWrapper = document.getElementById('component')
let target = document.getElementById('target')
let otherBox = document.getElementById('otherBox')
document.getElementById("btn").onclick = function() {
// target.scrollIntoView() // 目標元素滾動到頂部
target.scrollIntoView(false) // 目標元素滾動到底部
target.scrollIntoView({block: 'end',behavior: 'smooth' })
}
</script>
</html>
關注程序員蝸牛 直接上乾貨！