Alpinejs/Vue返回顶部按钮失效：scrollTo读取undefined属性报错

问题原因 #

报错Cannot read properties of undefined (reading 'scrollTo')的核心原因是Alpine.js中$refs的作用域限制：每个带有x-data的元素都是独立的组件实例，$refs仅能访问当前实例内部定义的引用。你的返回顶部按钮位于单独的x-data组件中，无法跨实例访问另一个区域的topScroll引用。

这种作用域隔离问题在Vue中同样存在——Vue的$refs也仅在当前组件实例内有效，跨组件访问refs需要通过父组件传递、全局注册等方式处理。

修复方案 #

方案1：将相关元素纳入同一x-data作用域 #

把搜索栏、列表容器、返回按钮统一放到同一个x-data实例下，让$refs在整个作用域内生效：

<section class="content" x-data="{ search: '' }">
  <div class="container">
    <div class="content__top">
      <input x-model="search" />
      <button
        class="input__btn font--m1"
        @click="$store.products.getAllProducts(search)"
      >
        Search
      </button>
    </div>
    <div x-ref="topScroll">
      <div>
        <template x-for="item in $store.products.people" :key="item.id">
          <div class="content__mid">
            <p class="content__mid-item" x-text="item.name"></p>
            <p class="content__mid-item" x-text="item.email"></p>
          </div>
        </template>
      </div>
    </div>
    <div class="content__bottom">
      <div class="content__bottom-left">
        <div
          class="btn--content"
          @click="$refs.topScroll.scrollTo({top: 0, behavior: 'smooth'})"
        >
          <span class="font--m1 text-underline">to top</span>
        </div>
      </div>
    </div>
  </div>
</section>

方案2：使用全局元素选择器 #

如果不想调整组件结构，可直接通过document.querySelector获取目标元素，绕过$refs的作用域限制：

<div
  class="btn--content"
  x-data
  @click="document.querySelector('[x-ref=\"topScroll\"]').scrollTo({top: 0, behavior: 'smooth'})"
>
  <span class="font--m1 text-underline">to top</span>
</div>

方案3：将ref注册到Alpine全局存储 #

通过Alpine的全局store存储目标元素引用，实现跨组件访问：

<!-- 列表容器中注册ref到全局store -->
<div
  x-ref="topScroll"
  x-init="$store.scrollRefs.topScroll = $refs.topScroll"
>
  <!-- 列表内容 -->
</div>

<!-- 返回按钮中调用store里的引用 -->
<div
  class="btn--content"
  x-data
  @click="$store.scrollRefs.topScroll.scrollTo({top: 0, behavior: 'smooth'})"
>
  <span class="font--m1 text-underline">to top</span>
</div>

<!-- 初始化全局store -->
<script>
document.addEventListener("alpine:init", () => {
  Alpine.store("scrollRefs", {});
  // 你的products store代码...
});
</script>

额外注意事项 #

• 确保目标容器可滚动：若topScroll容器未设置overflow: auto或overflow: scroll，scrollTo方法可能无法生效，需添加样式：

[x-ref="topScroll"] {
  max-height: 60vh;
  overflow-y: auto;
}

• Vue中的类似处理：遇到跨组件访问refs时，可通过provide/inject、全局状态管理或直接使用元素选择器实现。

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