通过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'
      })
    }
相关推荐
闭着眼睛学算法13 分钟前
【双机位A卷】华为OD笔试之【模拟】双机位A-新学校选址【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
前端一课29 分钟前
公开分享一个AI番茄短故事模块技术方案(含代码)
前端
晴殇i36 分钟前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架
源力祁老师41 分钟前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js
花开月正圆43 分钟前
遇见docker-compose
前端
护国神蛙1 小时前
自动翻译插件中的智能字符串切割方案
前端·javascript·babel
TechFrank1 小时前
浏览器云端写代码,远程开发 Next.js 应用的简易教程
前端
PaytonD1 小时前
LoopBack 2 如何设置静态资源缓存时间
前端·javascript·node.js
snow@li1 小时前
d3.js:学习积累
开发语言·前端·javascript
vincention1 小时前
JavaScript 中 this 指向完全指南
前端