前端滚动锚点注意事项

刀刀

4/8/2025

0 字

0 分钟

学习明灯

UP主：三十的前端课，视频地址：前往学习

何为锚点

在前端开发中，“锚点”（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 坐标

优点：可以精确控制到具体多少 px
缺点：需要先获取到 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
    });
  });
});

前端滚动锚点注意事项 ​

何为锚点 ​

案例场景 ​

常见方案 ​

scrollIntoView ​

scrollTo ​

scrollBy ​

老方法：a 锚点链接 ​

注意事项 ​