Alpine.js回到顶部按钮问题：按钮无法按滚动高度隐藏

你的代码有三个核心问题导致按钮无法隐藏：

1. 类绑定语法错误：Alpine.js的动态类需要用x-bind:class（或简写:class）指令，直接在class属性里写三元表达式不会被解析，所以按钮始终保持默认显示状态。
2. 滚动逻辑反转：你当前的逻辑是滚动超过200px时将show_backToTop设为false（隐藏），和你想要的“超过200px显示按钮”需求相反。
3. 初始值设置错误：初始在页面顶部时应该隐藏按钮，所以show_backToTop的初始值应该为false，而不是true。

修正后的完整代码 #

<body x-data="{show_backToTop: false}" 
    @scroll.window="show_backToTop = window.pageYOffset > 200">

<!-- back to top scroll button -->
<div :class="show_backToTop ? 'block' : 'is-hidden'">
    <div id="back_To_Top" 
        x-ref="backTotop" 
        @click="window.scrollTo({top: 0, behavior: 'smooth'})"
        class="scrollTop">
        <p>Back to top</p>
    </div>
</div>
</body>

关键修改说明 #

• 把class="show_backToTop ? 'block' : 'is-hidden' "改为:class="show_backToTop ? 'block' : 'is-hidden'"，让Alpine.js能解析动态类逻辑。
• 调整滚动事件的逻辑：show_backToTop = window.pageYOffset > 200，当滚动距离超过200px时自动设为true（显示按钮），否则为false（隐藏）。
• 将初始值show_backToTop: true改为false，页面加载时默认隐藏按钮。

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