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

2026年7 月4日 / 网站源码 / 2条 / 744次

龙哥最近一直用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.         <!-- 使用 Unicode 箭头字符，不依赖 Font Awesome -->
  5.         ↑
  6.         <!-- 如果您使用了 Font Awesome，可将上面一行替换为：<i class="fas fa-arrow-up"></i> -->
  7.     </button>
  8.     <button class="scroll-btn scroll-bottom" id="scrollBottomBtn" title="返回底部">
  9.         ↓
  10.         <!-- 同理，可替换为：<i class="fas fa-arrow-down"></i> -->
  11.     </button>
  12. </div>

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

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

  1. /* 滚动按钮容器 - 固定于右侧 */
  2. .scroll-buttons {
  3.     position: fixed;
  4.     rightright: 24px;
  5.     bottombottom: 100px;          /* 距离底部位置，可调整 */
  6.     display: flex;
  7.     flex-direction: column;
  8.     gap: 12px;
  9.     z-index: 999;
  10. }
  12. /* 单个按钮样式 */
  13. .scroll-btn {
  14.     width: 48px;
  15.     height: 48px;
  16.     border-radius: 50%;
  17.     border: none;
  18.     background: #ffffff;
  19.     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  20.     color: #4a5568;
  21.     font-size: 20px;
  22.     cursor: pointer;
  23.     display: flex;
  24.     align-items: center;
  25.     justify-content: center;
  26.     transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s, box-shadow 0.25s;
  27.     backdrop-filter: blur(4px);
  28.     border: 1px solid rgba(255, 255, 255, 0.6);
  30.     /* 默认隐藏（不可见、不可点击） */
  31.     opacity: 0;
  32.     transform: translateY(10px);
  33.     pointer-events: none;
  34. }
  36. /* 显示状态 - 通过 .show 类控制 */
  37. .scroll-btn.show {
  38.     opacity: 1;
  39.     transform: translateY(0);
  40.     pointer-events: auto;
  41. }
  43. /* 悬停效果（可自定义颜色） */
  44. .scroll-btn:hover {
  45.     background: #ff6b35;
  46.     color: #fff;
  47.     transform: scale(1.05);
  48.     box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25);
  49. }
  51. /* 移动端适配（可选） */
  52. @media (max-width: 480px) {
  53.     .scroll-buttons {
  54.         rightright: 16px;
  55.         bottombottom: 80px;
  56.         gap: 10px;
  57.     }
  58.     .scroll-btn {
  59.         width: 42px;
  60.         height: 42px;
  61.         font-size: 16px;
  62.     }
  63. }

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

  1. (function() {
  2.     'use strict';
  4.     var topBtn = document.getElementById('scrollTopBtn');
  5.     var bottomBtn = document.getElementById('scrollBottomBtn');
  7.     // 如果元素不存在则退出
  8.     if (!topBtn || !bottomBtn) return;
  10.     // 更新按钮显示状态
  11.     function updateButtons() {
  12.         var scrollY = window.scrollY || window.pageYOffset || 0;
  13.         var docHeight = document.documentElement.scrollHeight;
  14.         var winHeight = window.innerHeight;
  16.         // 距离底部 80px 以内视为“到达底部”
  17.         var bottomReached = (winHeight + scrollY) >= (docHeight - 80);
  19.         // 顶部按钮：滚动超过 200px 时显示
  20.         if (scrollY > 200) {
  21.             topBtn.classList.add('show');
  22.         } else {
  23.             topBtn.classList.remove('show');
  24.         }
  26.         // 底部按钮：未到达底部时显示
  27.         if (bottomReached) {
  28.             bottomBtn.classList.remove('show');
  29.         } else {
  30.             bottomBtn.classList.add('show');
  31.         }
  32.     }
  34.     // 滚动节流（避免频繁触发）
  35.     var timer = null;
  36.     function throttledUpdate() {
  37.         if (timer) return;
  38.         timer = setTimeout(function() {
  39.             updateButtons();
  40.             timer = null;
  41.         }, 50);
  42.     }
  44.     // 监听滚动和窗口大小变化
  45.     window.addEventListener('scroll', throttledUpdate, { passive: true });
  46.     window.addEventListener('resize', updateButtons);
  48.     // 点击事件：平滑滚动
  49.     topBtn.addEventListener('click', function() {
  50.         window.scrollTo({ top: 0, behavior: 'smooth' });
  51.     });
  52.     bottomBtn.addEventListener('click', function() {
  53.         window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
  54.     });
  56.     // 页面加载完成后初始化一次
  57.     if (document.readyState === 'complete') {
  58.         updateButtons();
  59.     } else {
  60.         window.addEventListener('load', updateButtons);
  61.     }
  62. })();

使用说明

复制 HTML 到您页面的任意位置（建议放在 < body> 结束前）。

复制 CSS 到您的样式文件中，或放在 < style> 标签内。

复制 JavaScript 到您的脚本文件中，或放在 < script> 标签内（确保在 DOM 加载后执行，或放在页面底部）。

不依赖任何外部库：按钮使用 Unicode 箭头（↑ / ↓），若您已引入 Font Awesome，可自行替换为图标标签。

引入Font Awesome图标添加css库：

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />  

可调参数：

滚动阈值（scrollY > 200）——可改为其他数值。

底部判定距离（docHeight - 80）——可调整 80 这个值。

这样您就获得了一个轻量、独立、即插即用的滚动辅助组件。

※实现效果完整代码整合

如果懒得分开，直接将以下全部代码放在< /body>前面即可：

  1. <!-- 滚动按钮容器 -->  
  2. <div class="scroll-buttons">  
  3.     <button class="scroll-btn scroll-top" id="scrollTopBtn" title="返回顶部">  
  4.         <!-- 使用 Unicode 箭头字符，不依赖 Font Awesome -->  
  5.         ↑  
  6.         <!-- 如果您使用了 Font Awesome，可将上面一行替换为：<i class="fas fa-arrow-up"></i> -->  
  7.     </button>  
  8.     <button class="scroll-btn scroll-bottom" id="scrollBottomBtn" title="返回底部">  
  9.         ↓  
  10.         <!-- 同理，可替换为：<i class="fas fa-arrow-down"></i> -->  
  11.     </button>  
  12. </div>  
  13. <style>  
  14. /* 滚动按钮容器 - 固定于右侧 */  
  15. .scroll-buttons {  
  16.     position: fixed;  
  17.     right: 24px;  
  18.     bottom: 100px;          /* 距离底部位置，可调整 */  
  19.     display: flex;  
  20.     flex-direction: column;  
  21.     gap: 12px;  
  22.     z-index: 999;  
  23. }  
  24.   
  25. /* 单个按钮样式 */  
  26. .scroll-btn {  
  27.     width: 48px;  
  28.     height: 48px;  
  29.     border-radius: 50%;  
  30.     border: none;  
  31.     background: #58b325;  
  32.     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);  
  33.     color: #ffffff;  
  34.     font-size: 20px;  
  35.     cursor: pointer;  
  36.     display: flex;  
  37.     align-items: center;  
  38.     justify-content: center;  
  39.     transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s, box-shadow 0.25s;  
  40.     backdrop-filter: blur(4px);  
  41.     border: 1px solid #DDD;  
  42.   
  43.     /* 默认隐藏（不可见、不可点击） */  
  44.     opacity: 0;  
  45.     transform: translateY(10px);  
  46.     pointer-events: none;  
  47. }  
  48.   
  49. /* 显示状态 - 通过 .show 类控制 */  
  50. .scroll-btn.show {  
  51.     opacity: .8;  
  52.     transform: translateY(0);  
  53.     pointer-events: auto;  
  54. }  
  55.   
  56. /* 悬停效果（可自定义颜色） */  
  57. .scroll-btn:hover {  
  58.     background: #ff6b35;  
  59.     color: #fff;  
  60.     transform: scale(1.05);  
  61.     box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25);  
  62. }  
  63.   
  64. /* 移动端适配（可选） */  
  65. @media (max-width: 480px) {  
  66.     .scroll-buttons {  
  67.         right: 16px;  
  68.         bottom: 80px;  
  69.         gap: 10px;  
  70.     }  
  71.     .scroll-btn {  
  72.         width: 42px;  
  73.         height: 42px;  
  74.         font-size: 16px;  
  75.     }  
  76. }  
  77. </style>  
  78. <script>  
  79. (function() {  
  80.     'use strict';  
  81.   
  82.     var topBtn = document.getElementById('scrollTopBtn');  
  83.     var bottomBtn = document.getElementById('scrollBottomBtn');  
  84.   
  85.     // 如果元素不存在则退出  
  86.     if (!topBtn || !bottomBtn) return;  
  87.   
  88.     // 更新按钮显示状态  
  89.     function updateButtons() {  
  90.         var scrollY = window.scrollY || window.pageYOffset || 0;  
  91.         var docHeight = document.documentElement.scrollHeight;  
  92.         var winHeight = window.innerHeight;  
  93.   
  94.         // 距离底部 80px 以内视为“到达底部”  
  95.         var bottomReached = (winHeight + scrollY) >= (docHeight - 80);  
  96.   
  97.         // 顶部按钮：滚动超过 200px 时显示  
  98.         if (scrollY > 200) {  
  99.             topBtn.classList.add('show');  
  100.         } else {  
  101.             topBtn.classList.remove('show');  
  102.         }  
  103.   
  104.         // 底部按钮：未到达底部时显示  
  105.         if (bottomReached) {  
  106.             bottomBtn.classList.remove('show');  
  107.         } else {  
  108.             bottomBtn.classList.add('show');  
  109.         }  
  110.     }  
  111.   
  112.     // 滚动节流（避免频繁触发）  
  113.     var timer = null;  
  114.     function throttledUpdate() {  
  115.         if (timer) return;  
  116.         timer = setTimeout(function() {  
  117.             updateButtons();  
  118.             timer = null;  
  119.         }, 50);  
  120.     }  
  121.   
  122.     // 监听滚动和窗口大小变化  
  123.     window.addEventListener('scroll', throttledUpdate, { passive: true });  
  124.     window.addEventListener('resize', updateButtons);  
  125.   
  126.     // 点击事件：平滑滚动  
  127.     topBtn.addEventListener('click', function() {  
  128.         window.scrollTo({ top: 0, behavior: 'smooth' });  
  129.     });  
  130.     bottomBtn.addEventListener('click', function() {  
  131.         window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });  
  132.     });  
  133.   
  134.     // 页面加载完成后初始化一次  
  135.     if (document.readyState === 'complete') {  
  136.         updateButtons();  
  137.     } else {  
  138.         window.addEventListener('load', updateButtons);  
  139.     }  
  140. })();  
  141. </script>  

关键词:

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

«
»

《漂亮的侧边返回顶部和底部代码》有2 条评论

  1. 黑桃三说道：
    2026年7月18日 上午9:08

    行，

    回复
  2. Ttzip天天绿软说道：
    2026年7月13日 下午6:07

    感谢分享，谢谢站长！！已收藏

    回复

提交评论

请拖动滑块对齐白圈完成验证

同类文章