通过window.scrollTo实现丝滑跳转到页面的某个位置

原理

通过计算对应id的组件距离页面顶部的距离,来使用window.scrollTo丝滑跳转到该位置

代码如下:

html 复制代码
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

<button  @click="scrollTo('test1')">丝滑跳转到指定id的div位置</button>
javascript 复制代码
    function scrollTo (id) {

      // 获取点击的按钮对应页面的id,及其相较于顶部的距离
      var PageId = document.querySelector('#' + id);
      var topHeight = PageId.offsetTop;

      // 使用平滑属性,滑动到上方获取的距离
      window.scrollTo({
        'top': topHeight,
        'behavior': 'smooth'
      })
    }
相关推荐
子兮曰10 小时前
Bun vs Node.js 深度对决:跑分快 4 倍,真实业务只剩 3%,2026 年到底该怎么选?
前端·后端·typescript
计算机魔术师10 小时前
终端用户
前端
码事漫谈10 小时前
把 AI 拆掉,你的系统还能跑吗?
前端·后端
默_笙11 小时前
⛵ 我用 React + TS 做了个"调色盘",顺便学会了企业级项目的目录架构
前端·javascript
预知同行11 小时前
从 MCP 到 CLI:AI Agent 工具链的架构演进与实战抉择
前端·面试
何智超11 小时前
AI 微前端性能优化之旅(中):重启
前端·vibecoding
渣波11 小时前
拒绝 Redux 样板代码:Zustand 核心原理与实战进阶指南(基础、异步与切片模式)
前端·javascript
C++、Java和Python的菜鸟11 小时前
第12章 前端Web进阶(Vue工程化+ElementPlus)
前端·javascript·vue.js
Hamm12 小时前
前端转Java+AI全栈?那我推荐几个实战开源项目给你
前端·后端·全栈
饼干哥哥12 小时前
十年数据分析经验,被我打包成了4个跨境VOC Skill
前端·数据分析·数据可视化