通过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'
      })
    }
相关推荐
李贺梖梖2 分钟前
CSS学习
前端·css
蚂小蚁11 分钟前
一文吃透:宏任务、微任务、事件循环、浏览器渲染、Vue 批处理与 Node 差异(含性能优化)
前端·面试·架构
狼性书生24 分钟前
uniapp实现的Tab 选项卡组件模板
前端·uni-app·vue·组件·插件
吃饺子不吃馅28 分钟前
前端画布类型编辑器项目,历史记录技术方案调研
前端·架构·github
许___29 分钟前
el-table多选模式下跨分页保留当前页选项
javascript·vue.js
拜晨43 分钟前
使用motion实现小宇宙贴纸墙效果
前端·交互设计
梦想平凡1 小时前
情怀源代码工程实践(加长版 1/3):确定性内核、事件回放与最小可运行骨架
开发语言·javascript·ecmascript
拜晨1 小时前
使用motion实现小宇宙节目广场的效果
前端·交互设计
爱吃甜品的糯米团子1 小时前
详解 JavaScript 内置对象与包装类型:方法、案例与实战
java·开发语言·javascript