通过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'
      })
    }
相关推荐
重庆穿山甲3 分钟前
我们不做「看起来很聪明」的知识库:一套企业级 RAG 平台的 37 屏真机实录
前端
风花一世月10 分钟前
🛩️ 我把一段夕阳飞行做成了能按键驾驶的网页(24 秒四段航线,在线直接玩)
前端
用户114818678948418 分钟前
实现一个「配置驱动」的动态表格组件(Vue + Element UI)
前端
数据掘金20 分钟前
小程序分享参数在页面栈中的传递
前端
乐享qicheng21 分钟前
1,自定义表单通俗理解-PC设计APP渲染
前端
为你学会写情书22 分钟前
大屏适配别再只会 transform: scale 了,这套方案更稳
前端
孤独的神22 分钟前
《AI 成了我的工位搭子,也成了我的焦虑来源》
前端
行者全栈架构师26 分钟前
给开源 Rust 工具加一个新检查项,TRAE 帮我从想法跑到构建产物:全链路实战
前端·算法·架构
衍辉channel27 分钟前
衍辉AI速递 10.14|谷歌发布Gemini 4 Argon模型等9条AI资讯
javascript
hunterandroid27 分钟前
[鸿蒙从零到一] relationalStore 高级实践:事务、迁移与敏感数据保护
前端