前端滚动锚点注意事项

刀刀

0字

0分钟

2026/8/16

何为锚点

锚点（Anchor）通常指 HTML 中的 <a> 元素，用于创建超链接，可链接到页面上其他位置或其他网页。

案例场景

从外部跳转到商品楼层页，根据 url 地址上的 query 参数，判断是否需要定位到某个指定楼层，来实现不同入口进入，定位到不同楼层
在页面中通过对应的按钮直接跳转到指定楼层

常见方案

scrollIntoView

将调用该方法的元素滚动到屏幕指定位置：中间、底部或顶部

优点：方便，获取元素后直接调用
缺点：难以精确控制，仅支持滚动到中间、顶部、底部，无法设置偏移

App.jsApp.vue

import { useRoute } from 'vue-router'
const { query } = useRoute()

const target = query.target

onMounted(() => {
  document.getElementById(target)?.scrollIntoView({
    behavior: 'smooth', // 平滑滚动
    block: 'start', // 滚动到顶部 start | center | end
  })
})

vue

<template>
  <button>美妆</button>
  <button>数码</button>
  <button>黄金</button>
  <button>家居</button>
  <button>美食</button>
  <div class="home" id="home">
    <div class="part" id="part1">美妆</div>
    <div class="part" id="part2">数码</div>
    <div class="part" id="part3">黄金</div>
    <div class="part" id="part4">家居</div>
    <div class="part" id="part5">美食</div>
  </div>
</template>

scrollTo

将可滚动元素滚动到指定 x、y 坐标

优点：可精确控制到具体像素
缺点：需先获取 x、y 坐标

App.jsApp.vue

import { useRoute } from 'vue-router'
const { query } = useRoute()

const target = query.target

onMounted(() => {
  const targetDom = document.getElementById(target)
  const targetRect = targetDom.getBoundingClientRect() // 获取元素相对于视口的位置
  document.getElementById('home').scrollTo(targetRect.x, targetRect.y - 100)
})

vue

<template>
  <button>美妆</button>
  <button>数码</button>
  <button>黄金</button>
  <button>家居</button>
  <button>美食</button>
  <div class="home" id="home">
    <div class="part" id="part1">美妆</div>
    <div class="part" id="part2">数码</div>
    <div class="part" id="part3">黄金</div>
    <div class="part" id="part4">家居</div>
    <div class="part" id="part5">美食</div>
  </div>
</template>

scrollBy

滚动指定 x、y 距离，即滚动一定距离，不指定坐标。

优点：仅做位移，而非滚动到指定元素
缺点：需自行计算距离

老方法：a 锚点链接

html

<a href="#part1">美妆</a>

<div>
  <div id="part1">美妆</div>
  <div id="part2">数码</div>
  <div id="part3">黄金</div>
  <div id="part4">家居</div>
  <div id="part5">美食</div>
</div>

此方法仅支持页面级滚动，无法针对元素滚动，因此逐渐被淘汰。

注意事项

整体滚动与内部元素滚动有明显区别。页面 F5 刷新时，在 Vue/React 项目中页面滚动位置不变（准确来说是页面加载完成后滚回上一次位置）。而元素滚动不会，其滚动状态不会被记录，这也是滚动无效的常见原因。

注意以下要点：

若打开即滚动到指定位置，Vue/React 项目务必在页面数据渲染完成后执行滚动

若无请求，在 onMounted（Vue）或 useEffect（React）中执行滚动操作；页面级滚动可能还需加小延迟

onMounted(() => {
  setTimeout(() => {
    document.getElementById(target)?.scrollIntoView({
      behavior: 'smooth', // 平滑滚动
      block: 'start', // 滚动到顶部 start | center | end
    })
  }, 1000)
})

若页面数据来自请求，确保数据渲染完成后执行滚动

onMounted(() => {
  nextTick(() => {
    document.getElementById(target)?.scrollIntoView({
      behavior: 'smooth', // 平滑滚动
      block: 'start', // 滚动到顶部 start | center | end
    })
  })
})

贡献者

v_duyilin

duyidao

刀刀

页面历史

最后编辑于 1 天前

查看完整历史

前端滚动锚点注意事项 ​

何为锚点 ​

案例场景 ​

常见方案 ​

scrollIntoView ​

scrollTo ​

scrollBy ​

老方法：a 锚点链接 ​

注意事项 ​

贡献者