<ahref="#aa">跳转到id为aa标记的锚点</a><p>-------------分隔线-------------</p><divid="aa">a</div>2. 利用 a 标签的 name 属性作为锚点
这里作为锚点的标签只能是 a 标签。
<ahref="#bb">跳转到name为bb的a标签锚点</a><p>-------------分隔线-------------</p><aname="bb">name为bb的a标签的锚点</a><divid="abb">bbb</div>
把稳：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时涌现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。
二、 js 实现1. 利用 scrollTo()window.scrollTo 滚动到文档中的某个坐标。可供应滑动效果，想详细理解 scrollTo() 可以看看 MDN 中的先容。
话不多说，看下面代码
「html 部分」:
<aid="linkc">平滑滚动到c</a><p>-------------分隔线-------------</p><divid="cc">c</div>
「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 部分」:
<aonclick="goTo()">利用scrollIntoView跳转到d</a><p>-------------分隔线-------------</p><divid="dd">ddd</div>
「js 部分」:
vardd=document.querySelector('#dd')functiongoTo(){dd.scrollIntoView()}
把稳：此功能某些浏览器尚在开拓中，请参考浏览器兼容性表格以得到在不同浏览器中适宜利用的前缀。由于该功能对应的标准文档可能被重新修订，以是在未来版本的浏览器中该功能的语法和行为可能随之改变。
下面为了方便看效果，把上面的代码整理在一起。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>div{width:600px;height:300px;background-color:pink;}</style></head><body><ahref="#aa">跳转到以id为aa标记的锚点a</a><p>-------------分隔线-------------</p><aname="aa">hhh</a><divid="aa">aa</div><ahref="#bb">跳转到name为bb的a标签锚点</a><p>-------------分隔线-------------</p><aname="bb">name为bb的a标签的锚点</a><p>-------------分隔线-------------</p><div>bb</div><aid="linkc">平滑滚动到c</a><p>-------------分隔线-------------</p><divid="cc">cc</div><aonclick="goTo()">利用scrollIntoView跳转到d</a><p>-------------分隔线-------------</p><divid="dd">dd</div><p>-------------分隔线-------------</p><div></div></body><script>varcc=document.querySelector('#cc')varlinkc=document.querySelector('#linkc')functionto(toEl){//ele为指定跳转到该位置的DOM节点letbridge=toEl;letbody=document.body;letheight=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>vardd=document.querySelector('#dd')functiongoTo(){dd.scrollIntoView()}</script></html>
效果图：
