漂亮的侧边返回顶部和底部代码

2026年7 月4日 / 网站源码 / 没有评论 / 171次

龙哥最近一直用AI做网站或者修改网站，经常让AI添加侧边返回顶部和底部的按钮，今天把鸡巴付（jibafu.com）改版了一下，感觉这个按钮的代码不错的，于是要AI专门整理出了完整的代码，所以放在博客收藏下，以后就直接拿来使用，免得浪费tokens。

1. HTML 结构（放在 前任意位置）

  1. <!-- 滚动按钮容器 -->
  2. <div class="scroll-buttons">
  3.     <button class="scroll-btn scroll-top" id="scrollTopBtn" title="返回顶部">
  4.         <!-- 您可以使用 Font Awesome 图标，或替换为 ↑ 字符 -->
  5.         <i class="fas fa-arrow-up"></i>
  6.         <!-- 如果不用 Font Awesome，可改为： ↑ -->
  7.     </button>
  8.     <button class="scroll-btn scroll-bottom" id="scrollBottomBtn" title="返回底部">
  9.         <i class="fas fa-arrow-down"></i>
  10.         <!-- 或改为： ↓ -->
  11.     </button>
  12. </div>

提示：如果您的项目未引入 Font Awesome，请将 替换为 ↑ 或使用 SVG 图标。

2. CSS 样式（放入您的样式表）

  1. /* ============================================================
  2.    滚动按钮样式 (独立组件)
  3.    ============================================================ */
  4. .scroll-buttons {
  5.     position: fixed;
  6.     right: 24px;
  7.     bottom: 100px;
  8.     display: flex;
  9.     flex-direction: column;
  10.     gap: 12px;
  11.     z-index: 999;
  12. }
  14. .scroll-btn {
  15.     width: 48px;
  16.     height: 48px;
  17.     border-radius: 50%;
  18.     border: none;
  19.     background: #ffffff;
  20.     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  21.     color: #4a5568;
  22.     font-size: 20px;
  23.     cursor: pointer;
  24.     /* 核心过渡效果，可根据喜好调整时长或属性 */
  25.     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, background 0.25s, box-shadow 0.25s;
  26.     display: flex;
  27.     align-items: center;
  28.     justify-content: center;
  29.     backdrop-filter: blur(4px);
  30.     border: 1px solid rgba(255, 255, 255, 0.6);
  31.     /* 默认隐藏（透明且不可点击） */
  32.     opacity: 0;
  33.     transform: translateY(10px);
  34.     pointer-events: none;
  35. }
  37. /* 显示状态 */
  38. .scroll-btn.show {
  39.     opacity: 1;
  40.     transform: translateY(0);
  41.     pointer-events: auto;
  42. }
  44. /* 悬停效果（可自定义颜色） */
  45. .scroll-btn:hover {
  46.     background: #ff6b35; /* 您可改为喜欢的颜色 */
  47.     color: #fff;
  48.     transform: scale(1.05) translateY(0);
  49.     box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25);
  50. }

3. JavaScript 逻辑（放入脚本文件或内联）

  1. /**
  2.  * 滚动按钮控制（独立可用）
  3.  * 功能：滚动超过 200px 显示“返回顶部”；滚动到底部时隐藏“返回底部”
  4.  */
  5. (function() {
  6.     var topBtn = document.getElementById('scrollTopBtn');
  7.     var bottomBtn = document.getElementById('scrollBottomBtn');
  9.     function updateScrollButtons() {
  10.         var scrollY = window.scrollY || window.pageYOffset || 0;
  11.         var docHeight = document.documentElement.scrollHeight;
  12.         var winHeight = window.innerHeight;
  13.         var bottomReached = (winHeight + scrollY) >= (docHeight - 80); // 距离底部 80px 以内视为到底
  15.         // 控制顶部按钮
  16.         if (scrollY > 200) {
  17.             topBtn.classList.add('show');
  18.         } else {
  19.             topBtn.classList.remove('show');
  20.         }
  22.         // 控制底部按钮
  23.         if (bottomReached) {
  24.             bottomBtn.classList.remove('show');
  25.         } else {
  26.             bottomBtn.classList.add('show');
  27.         }
  28.     }
  30.     if (topBtn && bottomBtn) {
  31.         var timer = null;
  32.         // 滚动事件（带节流）
  33.         window.addEventListener('scroll', function() {
  34.             if (timer) return;
  35.             timer = setTimeout(function() {
  36.                 updateScrollButtons();
  37.                 timer = null;
  38.             }, 50);
  39.         });
  40.         // 窗口大小变化时更新
  41.         window.addEventListener('resize', updateScrollButtons);
  42.         // 初始化
  43.         setTimeout(updateScrollButtons, 100);
  45.         // 点击事件
  46.         topBtn.addEventListener('click', function() {
  47.             window.scrollTo({ top: 0, behavior: 'smooth' });
  48.         });
  49.         bottomBtn.addEventListener('click', function() {
  50.             window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
  51.         });
  52.     }
  53. })();

使用说明：

复制 HTML 到您需要放置按钮的位置（通常放在 < /body> 前）。

复制 CSS 到您的样式文件中（或 < style> 标签内）。

复制 JavaScript 到您的脚本文件中（或 < script> 标签内）。

调整样式（可选）：

修改 right、bottom 调整位置。

修改 background、color 等匹配您的主题色。

修改 transition 时长或缓动函数。

图标：如果您没有 Font Awesome，将 < i> 替换为普通字符（如 ↑ ↓）或 SVG 图标。

注意事项：

该组件不依赖任何第三方库，纯原生实现。

已做滚动节流优化，性能良好。

兼容所有现代浏览器（Chrome、Firefox、Safari、Edge）。

如果您的项目已使用 jQuery，可替换为 jQuery 语法，但非必要。

关键词:

时间：2026年7 月4日，星期六，下午10:35。
通过 RSS 2.0 订阅源关注。

«

提交评论

同类文章