如何设置锚点，使得我们可以跳转到网页的指定位置呢？往下看。
简单的锚点
首先，我们需要设置一个锚点链接（跳转去锚点的连接） - <a href="#maodian">跳转去下锚位置</a> 。看，只需要在锚点链接的 href 属性值最前面加 # （如 #maodian）就可以了。
那么，如何设置锚点呢？
1
2
3
4
5
6
7
|
<!-- 设置锚点链接 -->
<a href="#maodian">跳转去下锚位置</a>
<!-- 两种设置锚点的方式 -->
<a name="maodian">锚点</a>
<!-- 或 -->
<div id="maodian">锚点</div>
|
看，只需要一个带有 name 属性（其值为锚点链接 href 属性值去掉 #，如 maodian）的 <a> 标签；或者是一个带有 id 属性（其值也为锚点链接 href 属性值去掉 #，如 maodian）的普通标签即可。
这种方法有一个不算缺点的缺点 - 浏览器的 URL 会发生变化。
有没有办法让 URL 不变化呢？有，使用 JavaScript ，这里我们只介绍一个最佳实践的办法。
如果滚动页面也是 DOM 没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。
在各种专有方法中，HTML5 选择了 scrollIntoView() 作为标准方法。
scrollIntoView() 可以在所有的 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。
如果给该方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入 false 作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<html>
<body>
<!-- 锚点链接 -->
<button id="md-link-1">scrollIntoView(true)</button>
<button id="md-link-2">scrollIntoView(false)</button>
<!-- ... -->
<!-- 锚点 -->
<div id="maodian1">scrollIntoView(ture) 元素上边框与视窗顶部齐平</div>
<div id="maodian2">scrollIntoView(false) 元素下边框与视窗底部齐平</div>
</body>
<script>
// 元素上边框与视窗顶部齐平
document.querySelector("#md-link-1").onclick = function () {
// document.querySelector("#maodian1").scrollIntoView();
// 或
document.querySelector("#maodian1").scrollIntoView(true);
};
// 元素下边框与视窗底部齐平
document.querySelector("#md-link-2").onclick = function () {
document.querySelector("#maodian2").scrollIntoView(true);
};
</script>
</html>
|
除了手动触发滚动外，也可以在渲染页面的时候使其完成自动跳转到锚点处，快去实现一下吧。
相关文章：JavaScript 20
