通过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'
      })
    }
相关推荐
jingling5553 分钟前
无需重新安装APK | uni-app 热更新技术实战
前端·javascript·前端框架·uni-app·node.js
遇见小美好y4 分钟前
uniapp 实现向下追加数据功能
前端·javascript·uni-app
wuhen_n5 分钟前
数据缓存策略:让我们的应用“快如闪电”
前端·javascript·vue.js
wuhen_n6 分钟前
自定义指令:为 DOM 操作提供高效的抽象入口
前端·javascript·vue.js
C_心欲无痕8 分钟前
前端 PDF 渲染与下载实现
前端·pdf
jiayong239 分钟前
可视化流程设计器技术对比:钉钉风格 vs BPMN
java·前端·钉钉
前端不太难11 分钟前
Flutter Web / Desktop 为什么“能跑但不好用”?
前端·flutter·状态模式
甘露s13 分钟前
新手入门:传统 Web 开发与前后端分离开发的区别
开发语言·前端·后端·web
双河子思14 分钟前
自动化控制逻辑建模方法
前端·数据库·自动化
wsad053217 分钟前
Vue.js 整合传统 HTML 项目:注册页面实战教程
前端·vue.js·html