前端锚点定位，零基础入门到精通，收藏这篇就够了

程序员_大白

墨衍会员 · AI 创作全网分发码龄5年

关注

原创最新推荐文章于 2026-10-28 17:56:07 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

全网最全面详细的Cursor使用教程，一篇就够了，让开发变成聊天一样容易阅读详情

一背景知识:

1.1 #号的作用

#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print
就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。
为网页位置指定标识符，有两个方法:

一是使用锚点，比如<a name="print"></a>，
二是使用id属性，比如<div id="print">。

HTTP请求不包括#.

2.2 a元素与URL对象

URL对象是浏览器的原生对象，可以用来构造、解析和编码 URL。一般情况下，通过window.URL可以拿到这个对象。

元素和元素都部署了这个接口。这就是说，
它们的 DOM 节点对象可以使用 URL 的实例属性和方法。

例如:我们利用a标签来获取一些东西

// <a href="#box1">我跳到box1</a>
// 上面时html代码
var a = document.querySelector('a');

	console.log(a.href); //返回整个 URL
	console.log(a.hash); //返回片段识别符，以井号#开头
	console.log(a.hostname); //返回域名
	console.log(a.search); //返回查询字符串，以问号?开头

二锚点定位含义

锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。

 // 锚点跳转有两种形式：
 
   *1. a标签 + name / href 属性
   *2. 使用标签的id属性

三锚点定位实现

1、利用#

缺点:url会发生改变,会在url最后面加上片段识别符#box2,这样就改变了URL的路径,这是我们不想看到的.因为再次刷新的时候回出现问题.

<a href="#box1">我跳到box1</a>
	<a href="#" name="#box2">我跳到box2</a>

	<div id="box1"></div>
	<div id="box2"></div>

2、scrollTop.offset

1、这种方法url不会发生改变,阻止了a标签的默认行为.所以a标签不会跳转.
2、 document.querySelector(target).offsetTop;
$(target).offset().top 都是去求出盒子参照body定位对应的top值,这是因为offet家族的定义是:
如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body .
3、上面代码的target得到格式都是#box1,此时在原生中利用属性选择器来获取元素要很多.

document.querySelector(target) 等价于
document.querySelector('#box1')

<script>
	var aList = document.querySelectorAll('a');
	//给每一个a标签注册点击事件
	for( var i=0;i < aList.length;i++){
		aList[i].addEventListener('click', function(e){

			//阻止a标签的默认行为
			e = e || window.event;
			e.preventDefault();

			//获取整个href路径
			//var target = this.href;
			//获取#片段识别符
			var target = this.hash;

			//获取box参照于body定位的top值
			var offsetTop = document.querySelector(target).offsetTop;
			//将页面跳转到对应的位置
			document.documentElement.scrollTop = offsetTop;	
		});
	}
</script>

3、srollIntoView

含义

scrollIntoView 是 HTMLElement 集合下的一个 API，每一个 HTML 元素都拥有这个 API。它的作用就和字面意思一样：滚动到可视区。

Element 接口的 scrollIntoView()方法会滚动元素的父容器，使被调用 scrollIntoView()的元素对用户可见。

语法

语法：

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数解释：

alignToTop：它是一个 Boolean 值，它用来规定元素出现在可视区后与可视区的对齐方式，为 true 代表顶端对齐，false 代表低端对齐。
scrollIntoViewOptions：它是一个对象，该参数主要是配置元素的动画效果以及位置的，它有一下 3 个属性：
behavior：它定义元素出现在可视区内过程的动画，有 auto 和 smooth 两种选择。
block：定义元素的垂直方向的对齐方式，有"start", “center”, “end”, 或 “nearest” 4 个选项，默认 start。
inline：定义元素水平对齐方式，有"start", “center”, “end”, 或 “nearest"4 个选项，默认"nearest”。

有些小伙伴可能发现两个参数都能定义元素的对齐方式，它们之间有什么联系呢？当 alignToTop 为 true 时，scrollIntoViewOptions: {block: “start”, inline: “nearest”}这是它的默认值，当 alignToTop 为 false 时，scrollIntoViewOptions: {block: “end”, inline: “nearest”}这是它的默认值。

<body>
  <div class="box">
    <div class="left">
      <p>第一段内容</p>
      <p>第二段内容</p>
      <p>第三段内容</p>
    </div>
    <div class="right">
      <div class="content">
        我是第一段内容
      </div>
      <div class="content">
        我是第二段内容
      </div>
      <div class="content">
        我是第三段内容
      </div>
    </div>
  </div>
</body>
<script>
  // 获取三个标题元素
  let pDomList = document.getElementsByTagName('p');
  // 获取三段内容元素
  let contentDomList = document.getElementsByClassName('content');

  // 添加点击事件
  for (let index = 0; index < pDomList.length; index++) {
    pDomList[index].addEventListener('click', () => {
      contentDomList[index].scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'start'
      })
    })
  }
</script>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;
  }

  .left {
    width: 300px;
    height: 100%;
    border-right: 2px solid green;
  }

  p {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #ccc;
  }

  .right {
    flex: 1;
    overflow: auto;
  }

  .content {
    width: 100%;
    height: 1000px;
    border-top: 1px solid yellow;
    padding: 20px;
    box-sizing: border-box;
  }
</style>

2025开年，AI技术打得火热，正在改变前端人的职业命运：