前言
有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 ，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。
一、 纯 html 实现
1. 利用 id 为标记的锚点
这里作为锚点的标签可以是任意元素。
跳转到id为aa标记的锚点
-------------分隔线-------------
a
2. 利用 a 标签的 name 属性作为锚点
这里作为锚点的标签只能是 a 标签。
跳转到name为bb的a标签锚点
-------------分隔线-------------
name为bb的a标签的锚点bbb
注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现(即以 name 为锚点和以 id 为锚点名字相同时)，会将后者作为锚点。
二、 js 实现
1. 利用 scrollTo()
window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。
话不多说，看下面代码
「html 部分」:
平滑滚动到c
-------------分隔线-------------
c
「js 部分」:
varlinkc=document.querySelector('#linkc')varcc=document.querySelector('#cc')functionto(toEl){//toEl为指定跳转到该位置的DOM节点letbridge=toEl;letbody=document.body;letheight=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 部分」:
利用scrollIntoView跳转到d
-------------分隔线-------------
ddd
「js 部分」:
vardd=document.querySelector('#dd')functiongoTo(){dd.scrollIntoView()}
注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
下面为了方便看效果，把上面的代码整理在一起。
html>Document跳转到以id为aa标记的锚点a
-------------分隔线-------------
hhhaa跳转到name为bb的a标签锚点
-------------分隔线-------------
name为bb的a标签的锚点
-------------分隔线-------------
bb平滑滚动到c
-------------分隔线-------------
cc利用scrollIntoView跳转到d
-------------分隔线-------------
dd
-------------分隔线-------------
效果图：
