页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con {
height: 1000px;
margin: 10px;
background-color: aqua;
}
</style>
</head>
<body>
<button onclick="go()">定位</button>
<div class="con">
<span id="1">1</span>
</div>
<div class="con">
<span id="2">2</span>
</div>
<div class="con">
<span id="3">3</span>
</div>
<div class="con">
<span id="4">4</span>
</div>
<div class="con">
<span id="5">5</span>
</div>
绘制了5个高度为1000px的长方形,点击按钮实现跳转到指定位置
scrollTo实现
function go() {
let aTags = document.querySelectorAll("span");
console.log(aTags);
let top;
let currentTop;
for (let i = 0; i < aTags.length; i++) {
if (aTags[i].innerText === '5') {
top = aTags[i].offsetTop;
currentTop = window.scrollY; //所在的位置
console.log(top);
console.log(currentTop);
window.scrollTo(0, top)
}
}
}
scrollIntoView实现
function go() {
let aTags = document.querySelectorAll("span");
console.log(aTags);
let top;
let currentTop;
for (let i = 0; i < aTags.length; i++) {
if (aTags[i].innerText === '5') {
top = aTags[i].offsetTop;
currentTop = window.scrollY; //所在的位置
console.log(top);
console.log(currentTop);
aTags[i].scrollIntoView();
}
}
}
使用总结
当页面存在多层dom嵌套，滚动条的高度并不是页面的最外层的滚动条时，第一种方法可能失效，第二种方法可以规避此问题，但兼容性相对较差，具体见下图。
