如何制作 “回到顶部” 悬浮按钮组件教程

在网页设计中，当页面内容过长时，一个优雅的“回到顶部”按钮能极大地提升用户体验。本文将带你深度剖析一段纯 JavaScript 实现的组件，学习如何动态注入样式、监听滚动以及实现平滑动画。
就像我的Blog里的一样，当你滑到Blog下面时右下角会出现一只可爱的小猫，当你点击她，整个Blog就会平滑的回到顶部了.

1. 组件功能概览

智能显示：只有页面滚动到指定高度（如 300px）时才显示。

丝滑体验：使用原生 CSS 过渡动画和 JS 平滑滚动算法。

动态注入：无需手动修改 HTML/CSS，一个脚本完成所有初始化。

环境适配：兼容 PJAX（如 Hexo, Butterfly 等博客系统）的异步刷新。

2. 完整源码与配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
(function() {
    // 【1. 参数配置】
    const config = {
        imgUrl: '/img/top.png',  // 你的按钮图标路径
        size: '100px',           // 按钮大小
        right: '10%',            // 距离右侧的距离
        bottom: '30px',          // 距离底部的距离
        showAt: 300              // 滚动超过 300px 出现
    };

    // 【2. 创建 DOM 元素】
    const bttBtn = document.createElement('div');
    bttBtn.id = 'custom-back-to-top';
    bttBtn.innerHTML = `<img src="${config.imgUrl}" alt="Top" style="width:100%; display:block;">`;
    document.body.appendChild(bttBtn);

    // 【3. 样式注入】
    const style = document.createElement('style');
    style.textContent = `
        #custom-back-to-top {
            position: fixed;
            right: ${config.right};
            bottom: ${config.bottom};
            width: ${config.size};
            cursor: pointer;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-in-out;
            transform: translateY(20px); /* 初始位移，用于做升起动画 */
        }
        #custom-back-to-top.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);    /* 回到原位 */
        }
        #custom-back-to-top:hover {
            transform: scale(1.1);       /* 悬停放大效果 */
        }
    `;
    document.head.appendChild(style);

    // 【4. 滚动逻辑】
    const handleScroll = () => {
        // 判断当前滚动条位置是否超过了阈值
        if (window.pageYOffset > config.showAt) {
            bttBtn.classList.add('is-visible');
        } else {
            bttBtn.classList.remove('is-visible');
        }
    };

    // 【5. 执行回顶】
    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 核心：开启浏览器原生平滑滚动
        });
    };

    // 【6. 事件绑定】
    window.addEventListener('scroll', handleScroll);
    bttBtn.addEventListener('click', scrollToTop);

    // 【7. 兼容性支持】
    // 针对 PJAX 系统，在页面局部刷新后重新计算状态
    document.addEventListener('pjax:complete', () => {
        handleScroll();
    });
})();

3. 核心技术点深度解析

A. 闭包封装 (IIFE)

代码最外层包裹了 (function() { … })();。

作用：创建一个独立的作用域，避免变量 config、bttBtn 与你网页中原有的脚本产生命名冲突。

B. 动态注入 CSS

通过 document.createElement(‘style’) 将样式插入 。

优势：真正的“即插即用”。你只需要引入一个 .js 文件，不需要额外去改动 .css 文件，非常利于组件化管理。

C. 动画组合拳

样式中使用了 opacity、visibility 和 transform 的组合：

opacity: 0 + visibility: hidden：确保按钮完全隐藏且不可被点击。

translateY(20px)：初始状态将按钮向下压低 20 像素。

.is-visible 状态：当满足滚动条件时，按钮变透明为不透明，并向上移动回到原位，产生一种“浮现”的效果。

D. 平滑滚动

window.scrollTo({ top: 0, behavior: ‘smooth’ }) 是现代浏览器的原生 API。

注意：它比传统的 window.scrollTo(0, 0) 更加友好，不需要引入额外的动画库（如 Tween.js）即可实现丝滑的视觉过渡。

E. PJAX 适配

如果你的博客（如 Hexo）使用了 PJAX 局部刷新，浏览器在切换页面时并不会刷新整个网页。document.addEventListener(‘pjax:complete’, …) 确保了在切换页>面后，按钮能根据新页面的滚动高度自动修正显示状态。

4. 如何部署

修改配置：将 config 中的 imgUrl 指向你自己的图标。

存为文件：保存为 back-to-top.js。

页面引入：
在 HTML 文件的 前加入：

1
<script src="/js/back-to-top.js"></script>

5. 常见问题排查

图标不显示：请检查 imgUrl 的路径是否正确，按 F12 查看控制台是否有 404 报错。

层级问题：如果按钮被页面其他元素遮挡，请调高 CSS 中的 z-index 值。

滚动不平滑：部分旧版浏览器可能不支持 behavior: ‘smooth’，此时会直接跳转到顶部，不影响基本功能。