2.HTML跳转到页面指定位置的几种方法

跳转到页面指定位置的几种方法"/>

2.HTML跳转到页面指定位置的几种方法

一、纯 html 实现

1.1 利用 id 为标记的锚点

这里作为锚点的标签可以是任意元素

<a href="#aa">跳转到 id 为 aa 标记的锚点</a>   <p>-------------分隔线-------------</p> <div id="aa">a</div>

1.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>

二、 js 实现

1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果

<a id="linkc">平滑滚动到 c</a>   <p>-------------分隔线-------------</p>   

<div id="cc">c</div>

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)});