锚点（锚记）与 JS 交互

一、锚记（锚点）基础

1. 原生 HTML 锚点（纯 CSS/HTML，无 JS）
   作用：页面内快速跳转到指定区块，URL 会带上#元素id
   写法
   html

跳到第一部分

内容区域1

配套 CSS 伪类 :target URL 锚点匹配 id 时，给目标区块自动改样式，纯 CSS 交互： css #part1:target { background: #eee; border: 2px solid blue; } 缺陷 1.跳转自带滚动闪烁，直接修改浏览器地址栏 hash； 2.无法自定义滚动平滑速度、偏移距离。 二、JS 控制锚点 / 页面滚动交互（核心） 方式 1：location.hash 跳转锚点（修改地址栏 #） javascript 运行 // 跳转到id为part2的区块 location.hash = "part2"; 特点： ·和原生效果完全一致； ·会触发浏览器滚动、更新 URL 哈希； ·配合hashchange事件监听锚点切换。 方式 2：Element.scrollIntoView ()（推荐，可控性最强） 让指定元素滚动到可视区域，可控制平滑滚动、对齐方式 javascript 运行 let target = document.getElementById("part3"); // 平滑滚动，元素顶部对齐窗口顶部 target.scrollIntoView({ behavior: "smooth", // smooth平滑 / auto瞬间 block: "start" // start顶部 / center居中 / end底部 }); 优势：不强制修改 URL 哈希，可自由控制滚动动画。 方式 3：window.scrollTo/scrollBy 精准滚动坐标 按像素数值滚动页面，适合固定偏移锚点场景 javascript 运行 // 平滑滚动到纵向500px位置 window.scrollTo({ top: 500, left: 0, behavior: "smooth" }); 三、JS 监听锚点切换：hashchange 事件 浏览器 URL 中#xxx变化时触发，实现导航栏高亮、Tab 切换 javascript 运行 // 监听锚点改变 window.addEventListener("hashchange", function () { // 获取当前锚点值（去掉#） let currentId = location.hash.slice(1); console.log("当前锚点：", currentId); // 给对应导航按钮加激活样式 document.querySelectorAll(".nav-item").forEach(item => { item.classList.remove("active"); if(item.getAttribute("href") === location.hash){ item.classList.add("active"); } }) }); 四、实战案例：导航锚点跳转 + 高亮交互 html 预览

区块1 区块2 区块3

区块1内容

区块2内容

区块3内容

五、锚点 JS 交互常见应用场景
1.页面顶部导航栏，点击跳转对应板块，自动高亮当前菜单；
2.回到顶部按钮（滚动到页面顶部锚点）；
3.商品详情页 Tab 切换（简介 / 参数 / 评价锚点切换）；
4.目录侧边栏，滚动页面自动匹配当前区块锚点；
5.单页应用简易路由（依靠 hash 区分页面模块）。
六、原生锚点 vs JS 滚动锚点 对比
表格

方式	是否修改 URL #	滚动可控性	适用场景
纯 a 标签锚点	是	只能瞬间滚动，无速度控制	简单快速跳转，不需要自定义动画
location.hash	是	仅自带默认滚动	需要记录页面位置、分享带锚点链接
scrollIntoView	可选不修改 hash，可平滑滚动、居中对齐	完全自定义动画、偏移	导航菜单、自定义滚动交互