组件 Back to Top 按钮 回到顶部按钮组件

回到顶部按钮组件

一个响应式的返回顶部按钮,采用仿生设计风格,支持黑暗主题和响应式效果。

预览

HTML 代码

<div class="fixed bottom-10 right-10 z-50">
    <a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110"> 
        <img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
    </a>
    <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
        Back to Top
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white { background-color: #1f2937; }
    .bg-gray-200 { background-color: #4b5563; }
    .bg-gray-700 { background-color: #2d3748; }
    .text-gray-800 { color: #f7fafc; }
}
</style>

相关组件

返回顶部按钮

返回顶部按钮组件,采用3D设计、鲜艳的色调和复杂的交互元素,适用于社交媒体界面,使用Tailwind CSS。包括响应式设计和暗主题支持.

打开

Neumorphic Back to Top 按钮

用于电子商务的中态“返回顶部”按钮,提供微妙、柔和的 UI 设计,使用精致的阴影与背景融为一体。它具有相似的颜色,外观和谐,布局简单,响应式设计,支持深色主题,非常适合在线购物体验。

打开

粗犷主义返回顶部按钮

返回顶部按钮组件,采用粗犷主义风格,三原色方案,并具有复杂的复杂性。响应式设计支持黑暗主题。不使用JavaScript。

打开