在 Alpine.js 中创建一个“返回顶部按钮”的解决方法可以如下所示:

HTML:

返回顶部

JavaScript:

function scrollToTop() {
  return {
    isScrolled: false,
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    },
    onScroll() {
      this.isScrolled = window.scrollY > 0;
    },
    init() {
      window.addEventListener("scroll", this.onScroll);
    },
    destroy() {
      window.removeEventListener("scroll", this.onScroll);
    }
  }
}

window.onload = function() {
  Alpine.start();
}

上述代码创建了一个 scrollToTop 函数，返回一个包含 Alpine.js 的数据和方法的对象。该对象包含一个 isScrolled 属性，用于控制按钮的显示和隐藏；一个 scrollToTop 方法，用于滚动到页面顶部；一个 onScroll 方法，用于监听滚动事件并更新 isScrolled 属性；还有 init 和 destroy 方法，用于初始化和销毁事件监听。

在 HTML 中，我们使用 x-data 属性将 scrollToTop 函数应用到按钮上。x-on:click 属性绑定了 scrollToTop 方法，当按钮被点击时触发滚动到顶部操作。x-show 属性根据 isScrolled 属性的值来控制按钮的显示和隐藏。

最后，在页面加载完成时，我们使用 Alpine.start() 方法来初始化 Alpine.js。

这样，当页面被滚动时，按钮会出现；当按钮被点击时，页面会平滑滚动到顶部。