通过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'
      })
    }
相关推荐
Lysun0018 分钟前
dispaly: inline-flex 和 display: flex 的区别
前端·javascript·css
山禾女鬼00118 分钟前
Vue 3 自定义指令
前端·javascript·vue.js
啊卡无敌20 分钟前
Vue 3 reactive 和 ref 区别及 失去响应性问题
前端·javascript·vue.js
北桥苏25 分钟前
Spine动画教程:皮肤制作
前端
涵信38 分钟前
第九节:React HooksReact 18+新特性-React 19的use钩子如何简化异步操作?
前端·javascript·react.js
Aaaaaaaaaaayou1 小时前
浅玩一下 Mobile Use
前端·llm
这个昵称也不能用吗?1 小时前
react-native搭建开发环境过程记录
前端·react native·cocoapods
hy_花花1 小时前
Vue3.4之defineModel的用法
前端·vue.js
DataFunTalk1 小时前
Foundation Agent:深度赋能AI4DATA
前端·后端·算法
hboot1 小时前
rust 全栈应用框架dioxus
前端·rust·全栈