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>
关注程序员蜗牛 直接上干货！
网友评论