通过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'
      })
    }
相关推荐
web守墓人31 分钟前
【前端】garn:使用go实现一款类似yarn的依赖管理器
前端
全栈陈序员38 分钟前
Vue 实例挂载的过程是怎样的?
前端·javascript·vue.js·学习·前端框架
Bruce_Liuxiaowei1 小时前
一键清理Chrome浏览器缓存:批处理与PowerShell双脚本实现
前端·chrome·缓存
怒放的生命19911 小时前
Vue 2 vs Vue 3对比 编译原理不同深度解析
前端·javascript·vue.js
GDAL1 小时前
html返回顶部实现方式对比
前端·html·返回顶部
Violet_YSWY1 小时前
ES6 () => ({}) 语法解释
前端·ecmascript·es6
LYFlied1 小时前
【每日算法】LeetCode 279. 完全平方数(动态规划)
前端·算法·leetcode·面试·动态规划
小北方城市网1 小时前
第7课:Vue 3应用性能优化与进阶实战——让你的应用更快、更流畅
前端·javascript·vue.js·ai·性能优化·正则表达式·json
向下的大树1 小时前
React 环境搭建 + 完整 Demo 教程
前端·react.js·前端框架
2501_916007472 小时前
React Native 混淆在真项目中的方式,当 JS 和原生同时暴露
javascript·react native·react.js·ios·小程序·uni-app·iphone