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

一、纯 html 实现

1.1 利用 id 为标记的锚点

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

跳转到 id 为 aa 标记的锚点   

-------------分隔线-------------

a

1.2 利用 a 标签的 name 属性作为锚点

这里作为锚点的标签只能是 a 标签

  跳转到 name 为 bb 的 a 标签锚点   

-------------分隔线-------------

  name 为 bb 的 a 标签的锚点   bbb

二、 js 实现

1. 利用 scrollTo()

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

平滑滚动到 c   

-------------分隔线-------------

  

c

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