通过window.scrollTo实现丝滑跳转到页面的某个位置

Sca_杰2024-06-29 18:54

原理

通过计算对应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'
      })
    }