@docs-site/site-docsify/docs/.docsify/styles/docsify-back-to-top.css

docsify site

/**
 * @file docsify-back-to-top.css
 * @brief 返回顶部按钮样式文件
 * @details 定义页面右下角的返回顶部按钮样式及交互效果
 */

/**
 * @brief 基础按钮样式
 * @details 定义返回顶部按钮的位置、大小和外观
 */
.back-to-top {
  position: fixed;           /* 固定定位 */
  bottom: 25px;              /* 距离底部25px */
  right: -40px;              /* 初始隐藏在右侧外 */
  width: 28px;               /* 宽度28px */
  height: 28px;              /* 高度28px */
  border-radius: 4px;        /* 4px圆角 */
  background: #e0e0e0;       /* 背景色 */
  display: flex;             /* 弹性布局 */
  align-items: center;       /* 垂直居中 */
  justify-content: center;   /* 水平居中 */
  cursor: pointer;           /* 鼠标手型 */
  box-shadow: 0 1px 4px rgba(0,0,0,0.1); /* 阴影效果 */
  transition: right 0.3s ease; /* 右侧位置变化添加0.3秒缓动 */
  z-index: 999;              /* 高堆叠顺序 */
}

/**
 * @brief 显示状态样式
 * @details 当按钮需要显示时的位置状态
 */
.back-to-top.show {
  right: 10px;               /* 距离右侧10px */
}

/**
 * @brief 按钮图标样式
 * @details 使用SVG内联方式定义向上箭头图标
 */
.back-to-top::before {
  content: '';               /* 伪元素内容 */
  display: inline-block;     /* 行内块显示 */
  width: 12px;               /* 图标宽度 */
  height: 12px;              /* 图标高度 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M634.847397 613.032044l-255.376295 0L379.471103 446.11443 181.752995 446.11443 511.080559 56.145741l329.327564 390.023948-205.561749 0L634.846374 613.032044 634.847397 613.032044zM634.847397 613.032044' fill='%23333'/%3E%3Cpath d='M379.397425 689.408549c0-22.313192 18.099217-40.399105 40.411385-40.399105l177.258123 0c22.313192 0 40.385802 18.085914 40.385802 40.399105l0 0c0 22.318308-18.072611 40.403199-40.385802 40.403199L419.80881 729.811748C397.495618 729.812771 379.397425 711.726857 379.397425 689.408549L379.397425 689.408549z' fill='%23333'/%3E%3Cpath d='M382.052904 817.972647c0-22.312168 18.099217-40.398082 40.411385-40.398082l177.258123 0c22.313192 0 40.385802 18.085914 40.385802 40.398082l0 0c0 22.319331-18.072611 40.404222-40.385802 40.404222L422.464289 858.376868C400.151098 858.376868 382.052904 840.291978 382.052904 817.972647L382.052904 817.972647z' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat; /* 不重复背景 */
  background-position: center;  /* 背景居中 */
}

/**
 * @brief 悬停状态样式
 */
.back-to-top:hover {
  background: #e0e0e0;       /* 背景色不变 */
  color: #333;               /* 文字颜色 */
}