HTML跳转到页面指定位置的几种方法
前言
有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 😭，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 💡 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。
一、 纯 html 实现
1. 利用 id 为标记的锚点
这里作为锚点的标签可以是任意元素。
<a href="#aa">跳转到 id 为 aa 标记的锚点</a>
<p>-------------分隔线-------------</p>
<div id="aa">a</div>
2. 利用 a 标签的 name 属性作为锚点
这里作为锚点的标签只能是 a 标签。
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<div id="abb">bbb</div>
注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。
二、 js 实现
1. 利用 scrollTo()
window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。
话不多说，看下面代码👇
「html 部分」:
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
// 计算该 DOM 节点到 body 顶部距离
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滚动到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
2. 利用 scrollIntoView()
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。
下面也直接上代码👇
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.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>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
<p>-------------分隔线-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<p>-------------分隔线-------------</p>
<div>bb</div>
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">dd</div>
<p>-------------分隔线-------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
</script>
</html>
效果图：