nuxt-anchorscroll

此模块提供滚动实现（滚动到顶部和滚动到锚点元素）。最初它旨在用于锚点滚动，因此被称为 nuxt-anchorscroll

在线游乐场

功能

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

开箱即用配置

对于顶部滚动 - 即时滚动，直到顶部且偏移量为零，忽略 x 轴
对于锚点滚动 - 平滑滚动，直到顶部元素且偏移量为零，忽略 x 轴
表面 - html 和 body 元素
通用功能 - 如果元素存在则滚动到锚点（使用 route.hash 作为选择器），否则滚动到顶部 - 尊重页面元数据 nuxt-anchorscroll 选项

支持两种布局*

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

但在锚点滚动由浏览器处理的情况下，您需要额外的设置 - 模块游乐场中有完整的解释。

可扩展

可以通过 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) ?? {},
        },
      }
    }
  }
})

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

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',
    ],
  },
})

此外，如果您使用标准布局，请参阅游乐场的说明。

就是这样！您现在可以在您的 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>