通过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'
      })
    }
相关推荐
小磊哥er11 小时前
深入解构Claude Code - 第 12 篇 · 整体串起来
javascript·ai编程
小磊哥er11 小时前
深入解构Claude Code - 第 11 篇 · 工程上的讲究
javascript·ai编程
深念Y13 小时前
Lenovo XiaoXinAir 14 — 性能模式切换
前端·网络
计算机魔术师13 小时前
Meta突然杀进第一梯队:一个新模型,把AI推理成本打下来8倍
前端
IT_陈寒13 小时前
Redis缓存雪崩把我坑惨了,这次长记性了
前端·人工智能·后端
风骏时光牛马13 小时前
提示词工程:大模型效能挖掘与指令设计实战
前端
仓三14 小时前
Chrome DevTools MCP 上手:让 Coding Agent 自己调试前端页面
前端·chrome devtools·mcp
计算机魔术师14 小时前
扒完Google AI Agent挑战赛的前三名,我发现了一个共同点
前端
独立开发之道14 小时前
【three.js教程】Three.js 运行时更新:矩阵、几何体、材质怎么改才不卡
javascript·矩阵·材质