vue3 实现锚点定位

点击导航跳到对应模块的起始位置

注意：

1. 一定要明确哪个是要滚动的盒子；
2. 滚动的高度要减去导航栏的高度；

核心js

const scrollToAnchor = (id) => {
   
  var anchor = document.getElementById(id);
  var scrollBox = document.getElementById('scrollBox')
  nextTick(() => {
   
    scrollBox.scrollTo({
   
      top: anchor.offsetTop - 30, // 减去的30为导航栏的高度，否则导航栏总会遮挡一部分内容
      behavior: 'smooth'
    });
 })
};

完整代码

<template>
  <div class="box" id="scrollBox" v-loading="loading">
    <div class="fixed-box">
      <div class="box-header">
        <span><a @click="scrollToAnchor('section1')">导航1</a></span>
        <span><a @click="scrollToAnchor('section2')">导航2</a></span>
        <span><a @click="scrollToAnchor('section3')">导航3</a></span>
        <span><a @click="scrollToAnchor('section4')">导航4</a></span>
      </div>
    </div>
    <div class="container" id="printcontent">
      <div id="section1">
        <h3>日历</h3>
        <el-calendar v-model="value" />
      </div>
      <div id