Back to Top 按钮
一个简单而优雅的返回顶部按钮，固定在屏幕的右下角。具有微妙的柔和配色方案和平滑的悬停/聚焦微交互。该按钮包括响应式设计，内置深色模式支持。悬停时，该按钮会轻轻放大并更改背景颜色以提供视觉反馈。该组件仅使用 Tailwind CSS 类，无需 JavaScript。
HTML 代码
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span class="sr-only">Back to top</span>
</button>