通过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'
      })
    }
相关推荐
蓉妹妹14 分钟前
React微信小程序自定义tabbar
前端·react.js·微信小程序
拿我格子衫来20 分钟前
图形编辑器基于Paper.js教程32:绘制贝塞尔曲线,并进行二次编辑
javascript·图像处理·编辑器·图形渲染
编程大师哥21 分钟前
如何快速上手Django?3 小时从 0 到 1 做出第一个 Web 项目(小白友好版)
前端·django·sqlite
博主花神22 分钟前
【React】路由
前端·react.js·前端框架
曹牧23 分钟前
C#:$ 符号
开发语言·javascript·c#·ecmascript
代码游侠26 分钟前
应用——Linux 标准IO编程
linux·前端·数据库·学习·算法
用户990450177800932 分钟前
微信红包封面制作redbag-cover
前端
2401_8604947032 分钟前
在React Native中开发进度条组件,可以使用多种方式来实现,包括使用内置的`ProgressViewharmony`(仅限harmony)
javascript·react native·react.js
一人の梅雨38 分钟前
淘宝商品详情接口深度解析:从 Sign 签名动态生成到多端数据全息重构
开发语言·javascript·重构
christine-rr38 分钟前
windows系统上node.js安装配置教程
前端·windows·npm·node.js