在Quasar框架中实现点击锚点链接平滑滚动的组件或工具问询

Quasar 本身内置了原生支持的平滑滚动能力，无需引入第三方依赖即可实现需求，常用方案如下：

• 全局统一配置开启
  直接在项目的 quasar.config.js 中修改 framework 配置，开启全局平滑滚动，配置后所有页面级锚点跳转、带hash的路由跳转都会自动应用平滑滚动效果：

  // quasar.config.js
  export default defineConfig({
    framework: {
      // 加入这行配置
      scrollBehavior: 'smooth'
    }
  })
  

• 灵活调用内置 $scrollTo 工具方法
  如果你需要控制单一场景的滚动效果、或者是在QScrollArea组件内部滚动，可以直接调用Quasar暴露的滚动工具，支持自定义滚动时长、缓动曲线等参数：

  <template>
    <!-- 锚点点击示例，阻止原生跳转调用工具方法 -->
    <a 
      href="#section2" 
      @click.prevent="handleScrollToAnchor('section2')"
    >
      跳转到第二部分
    </a>
  
    <div id="section2" style="margin-top: 1000px;">
      第二部分内容
    </div>
  </template>
  
  <script setup>
  import { useQuasar } from 'quasar'
  const $q = useQuasar()
  
  const handleScrollToAnchor = (anchorId) => {
    const targetEl = document.getElementById(anchorId)
    if (!targetEl) return
    $q.scrollTo(targetEl, {
      duration: 500, // 滚动动画时长，单位ms
      easing: 'ease-out' // 缓动效果
    })
  }
  </script>
  

• QScrollArea 组件内滚动
  如果你是在 Quasar 的 QScrollArea 包裹的自定义滚动区域内做锚点跳转，直接调用组件实例的 scrollTo 方法即可，参数和全局 $scrollTo 完全一致。

内容的提问来源于stack exchange，提问作者william007