通过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'
      })
    }
相关推荐
光影少年1 天前
用vite还是webpack多,vite为什么快
前端·webpack·node.js
waeng_luo1 天前
[鸿蒙2025领航者闯关] 鸿蒙应用中如何管理组件状态?
前端·harmonyos·鸿蒙·鸿蒙2025领航者闯关·鸿蒙6实战·开发者年度总结
克喵的水银蛇1 天前
Flutter 通用列表项封装实战:适配多场景的 ListItemWidget
前端·javascript·flutter
Howie Zphile1 天前
做移动端的 Next.js 项目,可以选哪些 UI?
开发语言·javascript·ui
WX-bisheyuange1 天前
基于Spring Boot的宠物商城网站设计与实现
前端·javascript·vue.js·毕业设计
9号达人1 天前
大家天天说的'银弹'到底是个啥?看完这篇你就明白了
前端·后端·程序员
苏打水com1 天前
第四篇:Day10-12 JS事件进阶+CSS动画——实现“复杂交互+视觉动效”(对标职场“用户体验优化”需求)
javascript·css·交互
初遇你时动了情1 天前
react native实战项目 瀑布流、菜单吸顶、grid菜单、自定义背景图、tabbar底部菜单、轮播图
javascript·react native·react.js
BD_Marathon1 天前
【JavaWeb】JavaScript使用var声明变量的特点
javascript
踢球的打工仔1 天前
前端html(1)
前端·算法·html