组件 Back to Top 按钮 Back to Top Button 组件

Back to Top Button 组件

专为电子商务设计的响应式“Back to Top”按钮组件,在深色背景上具有鲜艳的配色方案。它包括一个微妙的悬停效果,并通过深色模式支持确保在所有屏幕大小的可见性。

预览

HTML 代码

<div class="fixed bottom-4 right-4 z-50">
  <a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
    <svg class="w-6 h-6 text-white transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
    <span class="sr-only">Back to Top</span>
  </a>
</div>

相关组件

粗犷主义返回顶部按钮

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

打开

Back to Top Button 组件

一个响应式背靠上按钮,采用纸张/印刷灵感设计,使用带有微妙点缀的黑白配色方案。它适用于教育平台,包括深色模式支持和简洁、可访问的布局。

打开

Back to Top Button 组件

响应式“Back to Top”按钮,具有 Material Design 美学、单色配色方案和深色模式支持。它在右下角显示为浮动作按钮 (FAB)。

打开