nuxt-anchorscroll

此模块提供滚动实现（滚动到顶部和滚动到锚点元素）。最初它是为锚点滚动而设计的，这就是为什么它被称为 nuxt-anchorscroll

在线 Playground

特性

开箱即用
支持两种布局*
可扩展

开箱即用

对于顶部滚动 - 立即滚动，直到顶部，偏移为零，忽略 x 轴
对于锚点滚动 - 平滑滚动，直到顶部元素，偏移为零，忽略 x 轴
表面 - html 和 body 元素
通用函数 - 如果元素存在则滚动到锚点 (使用 route.hash 作为选择器)，否则滚动到顶部 - 遵循页面元数据 nuxt-anchorscroll 选项

支持两种布局*

通常情况下，您使用裁剪的 HTML 或完整的 HTML。在第一种情况下（您现在可以检查），滚动到锚点将不起作用。如果这样，您可以进行最小化设置。

但是，如果锚点滚动由浏览器处理，则需要额外设置 - 在模块 Playground 中有完整解释。

可扩展

可以通过 NuxtApp.$anchorScroll 运行时配置的 matched 字段为需要的路由指定锚点滚动（默认配置在 script setup 之前设置）

nuxtApp.$anchorScroll!.matched.push(({ path, hash }) => {
  // Exit when route is not represent fixed example
  if (!path.startsWith('/standard/fixed'))
    return undefined

  if (hash) {
    // All anchor element on this route is mangled
    const targetSelector = `#fixed-${hash.slice(1)}`
    const targetElement = document.querySelector(targetSelector)
    if (targetElement) {
      return {
        toAnchor: {
          target: targetElement as HTMLElement,
          scrollOptions: toValue(useNuxtApp().$anchorScroll?.defaults?.toAnchor) ?? {},
        },
      }
    }
  }
})

此外，您的 matched 函数可以为滚动指定不同的表面。

nuxtApp.$anchorScroll!.matched.push(({ path, hash }) => {
  // Exit when route is not represent fixed example
  if (!path.startsWith('/scrollable'))
    return undefined

  const surfaces = [...document.querySelectorAll('#exited-scrollable-surface')]

  return {
    toAnchor: {
      surfaces,
      scrollOptions: {
        /* ... */
      },
    },
    toTop: {
      surfaces,
      scrollOptions: {
        /* ... */
      },
    }
  }
})

快速设置

将 nuxt-anchorscroll 依赖项添加到您的项目中

使用您喜欢的包管理器（我更喜欢 yarn）

yarn add -D nuxt-anchorscroll

pnpm add -D nuxt-anchorscroll

npm install --save-dev nuxt-anchorscroll

将 nuxt-anchorscroll 添加到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: [
    'nuxt-anchorscroll',
  ]
})

此外，如果您正在使用过渡效果，可能还需要在不同的钩子上滚动

export default defineNuxtConfig({
  modules: [
    'nuxt-anchorscroll',
  ],

  anchorscroll: {
    hooks: [
      // Or any valid hook if needed
      // Default is `page:finish`
      'page:transition:finish',
    ],
  },
})

此外，如果您使用的是标准布局，请参阅 Playground 说明。

就是这样！您现在可以在您的 Nuxt 应用中使用 nuxt-anchorscroll 了✨

组合式函数

最有可能的是您想在点击时滚动到锚点或顶部。这可以通过 useAnchorScroll 组合式函数实现

// Default to top is instant
const { scrollToAnchor, scrollToTop } = useAnchorScroll({
  toTop: {
    scrollOptions: {
      behavior: 'smooth',
      offsetTop: 0,
    }
  },
})

并在模板中使用

<template>
  <div
    class="box"
    mt-12
    flex flex-row gap-4 align-baseline
  >
    <h2
      :id="id"
      text-3xl font-extrabold
    >
      <slot />
    </h2>
    <NuxtLink
      :href="`#${id}`"
      mb-a mt-a
      text-xl
      @click="scrollToAnchor(id)"
    >
      #
    </NuxtLink>
  </div>
</template>