页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）
由于最近有回到顶部、根据nav定位到指定div和定位到输入错误的输入框的需求，所以在此分析此类需求可能的解决方案
用a标签的href属性
这是比较常用的一种方法
href。这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置（ID）开头的名字。
查资料的时候发现html5中a标签新增download属性，很强大但是兼容性还不够
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>link</title>
<style>
.link{
float: left;
}
.target{
float: left;
}
.target ul li{
height: 400px;
}
</style>
</head>
<body>
<div class="link">
<a href="#JAMES">1</a>
<a href="#PAUL">2</a>
<a href="#HARDEN">3</a>
</div>
<div class="target">
<ul>
<li id="JAMES">JAMES</li>
<li id="PAUL">PAUL</li>
<li id="HARDEN">HARDEN</li>
</ul>
</div>
</body>
</html>
缺点：点击跳转后url发生变化，页面刷新后可能有问题
通过window.location.hash
此方法原理与通过a标签的href属性相同，都是根据锚点来实现定位
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css standard</title>
<style>
.link {
float: left;
}
.target {
float: left;
}
.target ul li {
height: 400px;
}
</style>
</head>
<body>
<div id="link">
<span class="JAMES">JAMES</span>
<span class="PAUL">PAUL</span>
<span class="HARDEN">HARDEN</span>
</div>
<div class="target">
<ul>
<li id="JAMES">JAMES</li>
<li id="PAUL">PAUL</li>
<li id="HARDEN">HARDEN</li>
</ul>
</div>
<script>
window. = function () {
// 兼容
function addListener(target, type, handler) {
if (target.addEventListener) {
target.addEventListener(type, handler);
} else if (target.attachEvent) {
target.attach("on" + type, function () {
handler.call(target); //让handler中的this指向目标元素
});
} else {
target["on" + type] = handler;
}
};
var dom = document.getElementById('link');
addListener(dom, 'click', function (e) {
window.location.hash = e.target.className;
});
}
</script>
</body>
</html>
缺点：点击跳转后url发生变化，页面刷新后可能有问题
用scrollTop属性实现
根据元素的scrollTop属性实现，这是之前很常用的一种实现方式，此处不细说。实例借助Jquery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css standard</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
.link {
float: left;
}
.target {
float: left;
}
.target ul li {
height: 400px;
}
</style>
</head>
<body>
<div id="link">
<span id="link1">JAMES</span>
<span id="link2">PAUL</span>
<span id="link3">HARDEN</span>
</div>
<div class="target">
<ul>
<li id="JAMES">JAMES</li>
<li id="PAUL">PAUL</li>
<li id="HARDEN">HARDEN</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#link").click(function () {
$("html, body").animate({
scrollTop: $("#JAMES").offset().top
}, { duration: 500, easing: "swing" });
return false;
});
$("#link2").click(function () {
$("html, body").animate({
scrollTop: $("#PAUL").offset().top
}, { duration: 500, easing: "swing" });
return false;
});
$("#link3").click(function () {
$("html, body").animate({
scrollTop: $("#HARDEN").offset().top
}, { duration: 500, easing: "swing" });
return false;
});
});
</script>
</body>
</html>
缺点：如果页面复杂的话，偏移值可能会发生变化需要算法实现，并且脱离Jquery实现代码量会比较大，但是好处就是兼容性好，可行性高
用scrollIntoView实现
先看看用scrollIntoView实现的兼容性
兼容性还不错，关键是实现特别简单，不需要自己计算（偷懒神器）
- 语法
element.scrollIntoView(); - 参数
// element.scrollIntoView(Boolean) Boolean型参数
1.如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
2.如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
// element.scrollIntoView(Obj) 型参数
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "end",
}
// block与Boolean型参数作用相同，behavior参数是决定页面是如何滚动smooth有动画。
这个方法用的时候直接调用就ok，document.getElementById("divId").scrollIntoView();
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollIntoView demo1</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 500px;
}
.scroll {
margin-top: 300px;
height: 200px;
background: lightcoral;
}
.btn {
padding: 10px 15px;
position: fixed;
right: 0;
top: 300PX;
background: rebeccapurple;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="scroll"></div>
<div class="btn">click</div>
<script>
const btn = document.querySelector('.btn');
const test = document.querySelector('.scroll');
btn.addEventListener('click', function() {
test.scrollIntoView();
})
</script>
</body>
</html>
当然，scrollIntoView还接受一个参数，更具体的细节可以参考MDN上的介绍
本文csdn地址
随时随地看视频
