滚动到页面顶部- livewire组件-高山js

// 在Livewire组件中
namespace App\Http\Livewire;

use Livewire\Component;

class ScrollToTop extends Component
{
    public function scrollToTop()
    {
        $this->emit('scrollToTop');
    }
}

<!-- 在Blade模板中 -->
<button wire:click="scrollToTop" id="scroll-to-top-btn" style="display: none;">返回顶部</button>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        window.addEventListener('scroll', function () {
            const btn = document.getElementById('scroll-to-top-btn');
            if (window.scrollY > 300) {
                btn.style.display = 'block';
            } else {
                btn.style.display = 'none';
            }
        });

        document.getElementById('scroll-to-top-btn').addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });
</script>