网页右侧悬浮QQ在线客服代码怎么用？-网页设计-锦华智联科技

基础悬浮按钮（最常用）

这是最经典、最简单的一种实现方式，一个固定的QQ图标,点击后弹出QQ聊天窗口。

（图片来源网络，侵删）

特点：

简单直接：代码量少,易于实现。
固定位置：按钮始终停留在屏幕右侧中间位置,不随页面滚动而移动。
兼容性好：所有现代浏览器都支持。

代码实现：

您只需要将以下代码复制到您的HTML文件中即可。请记得修改 您的QQ号码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">QQ在线客服示例</title>
    <style>
        /* 基础样式，确保body没有默认外边距 */
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
        }
        /* 为了演示滚动效果，添加一些内容 */
        .content {
            height: 2000px;
            padding: 20px;
            background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
            text-align: center;
        }
        /* 这是QQ客服按钮的容器 */
        .qq-service-container {
            /* 固定定位，相对于浏览器窗口 */
            position: fixed;
            right: 20px; /* 距离右边20px */
            bottom: 20px; /* 距离底部20px */
            z-index: 1000; /* 确保按钮在其他内容之上 */
        }
        /* QQ按钮的样式 */
        .qq-service-btn {
            display: block;
            width: 120px;
            height: 120px;
            background-image: url('https://pub.idqqimg.com/qconn/wpa/assets/img/icon-qq.png');
            background-size: cover; /* 背景图片覆盖整个按钮 */
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 50%; /* 圆形按钮 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 阴影效果，增加立体感 */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡动画 */
            text-decoration: none; /* 移除链接下划线 */
        }
        /* 鼠标悬停时的效果 */
        .qq-service-btn:hover {
            transform: scale(1.1); /* 放大1.1倍 */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* 增强阴影 */
        }
        /* 提示文字 */
        .qq-service-text {
            position: absolute;
            bottom: -30px; /* 位于按钮下方 */
            left: 50%;
            transform: translateX(-50%); /* 水平居中 */
            color: #333;
            font-size: 14px;
            white-space: nowrap; /* 防止文字换行 */
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>向下滚动页面</h1>
        <p>右下角的QQ客服按钮会一直固定在那里。</p>
    </div>
    <!-- QQ客服按钮代码 -->
    <div class="qq-service-container">
        <a href="tencent://message/?uin=您的QQ号码&Site=&Menu=yes" class="qq-service-btn" target="_blank" rel="noopener noreferrer"></a>
        <span class="qq-service-text">在线客服</span>
    </div>
</body>
</html>

代码解释：

HTML 结构:
- <div class="qq-service-container">: 这是一个容器，使用 position: fixed 固定在视口的右下角。
- <a>: 这是一个链接，核心部分。
  - href="tencent://message/?uin=您的QQ号码&Site=&Menu=yes": 这是QQ的协议链接。
    - tencent://message/: 表示启动QQ聊天。
    - uin=您的QQ号码: 这是必须修改的部分,替换成您的QQ号。
    - Site=: 可选,显示来源网站。
    - Menu=yes: 可选,打开聊天窗口后是否显示更多菜单。
  - target="_blank": 在新标签页中打开,避免影响当前页面。
  - rel="noopener noreferrer": 安全性最佳实践，防止新打开的页面通过 window.opener 反向控制您的页面。
- <span class="qq-service-text">: 按钮下方的提示文字。
CSS 样式:
- position: fixed;: 这是实现“悬浮”效果的关键，它将元素相对于浏览器窗口进行定位，即使页面滚动,元素也会保持在原地。
- right: 20px; bottom: 20px;: 定义了按钮距离窗口右边和底部的距离。
- z-index: 1000;: 确保按钮的层级很高,不会被其他内容遮挡。
- border-radius: 50%;: 将方形元素变成圆形。
- transition: 为按钮添加了平滑的放大和阴影变化效果,提升用户体验。

带多个客服的悬浮面板

当您有多个客服人员或不同部门（如售前、售后）时,可以使用一个展开的面板来展示多个QQ图标。

（图片来源网络，侵删）

特点：

多客服支持：可以展示多个QQ号。
节省空间：默认只显示一个主按钮，点击后展开,更美观。
交互性强：有展开/收起的动画效果。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">多QQ客服悬浮面板</title>
    <style>
        body { margin: 0; font-family: sans-serif; }
        .content { height: 2000px; padding: 20px; background: #f9f9f9; text-align: center; }
        /* 面板容器 */
        .service-panel {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
        }
        /* 主按钮 */
        .main-btn {
            width: 60px;
            height: 60px;
            background: #12B7F5; /* 腾讯蓝 */
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .main-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        /* 客服列表容器，默认隐藏 */
        .service-list {
            position: absolute;
            bottom: 70px; /* 位于主按钮上方 */
            right: 0;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            padding: 10px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        /* 当面板被激活时，显示列表 */
        .service-panel.active .service-list {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        /* 单个客服项 */
        .service-item {
            display: block;
            padding: 12px 20px;
            text-decoration: none;
            color: #333;
            display: flex;
            align-items: center;
            transition: background 0.2s ease;
        }
        .service-item:hover {
            background: #f0f0f0;
        }
        .service-item img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>多客服悬浮面板示例</h1>
        <p>点击右下角的蓝色按钮。</p>
    </div>
    <div class="service-panel" id="servicePanel">
        <!-- 主按钮 -->
        <div class="main-btn" id="mainBtn">?</div>
        <!-- 客服列表 -->
        <div class="service-list">
            <a href="tencent://message/?uin=客服QQ1&Site=&Menu=yes" class="service-item" target="_blank" rel="noopener noreferrer">
                <img src="https://q1.qlogo.cn/headimg_dl?dst_uin=客服QQ1&spec=100" alt="客服1">
                <span>售前咨询</span>
            </a>
            <a href="tencent://message/?uin=客服QQ2&Site=&Menu=yes" class="service-item" target="_blank" rel="noopener noreferrer">
                <img src="https://q1.qlogo.cn/headimg_dl?dst_uin=客服QQ2&spec=100" alt="客服2">
                <span>售后服务</span>
            </a>
            <a href="tencent://message/?uin=客服QQ3&Site=&Menu=yes" class="service-item" target="_blank" rel="noopener noreferrer">
                <img src="https://q1.qlogo.cn/headimg_dl?dst_uin=客服QQ3&spec=100" alt="客服3">
                <span>技术支持</span>
            </a>
        </div>
    </div>
    <script>
        // 获取元素
        const panel = document.getElementById('servicePanel');
        const mainBtn = document.getElementById('mainBtn');
        // 点击主按钮，切换面板的激活状态
        mainBtn.addEventListener('click', function(event) {
            event.stopPropagation(); // 阻止事件冒泡，防止点击列表时立即关闭
            panel.classList.toggle('active');
        });
        // 点击页面其他任何地方，关闭面板
        document.addEventListener('click', function() {
            panel.classList.remove('active');
        });
        // 点击列表本身时，不要关闭面板（因为事件冒泡已经被上面的stopPropagation阻止了）
        panel.querySelector('.service-list').addEventListener('click', function(event) {
            event.stopPropagation();
        });
    </script>
</body>
</html>

代码解释：

HTML: 增加了一个主按钮 main-btn 和一个包含多个客服链接的列表 service-list,列表默认是隐藏的。
CSS:
- .service-list 使用了 opacity: 0, visibility: hidden 和 transform 来实现平滑的淡入和上移动画。
- .service-panel.active .service-list 是一个关键选择器，当父容器 .service-panel 拥有 .active 类时,客服列表才会显示。
JavaScript:
- 通过 addEventListener 监听主按钮的点击事件，使用 classList.toggle('active') 来添加或移除 .active 类,从而控制面板的展开和收起。
- event.stopPropagation() 用于阻止事件的冒泡，防止点击客服列表项时，事件冒泡到 document 层级导致面板被立即关闭。
- 点击页面空白处 (document) 会关闭面板,这是很好的用户体验。

智能悬浮（滚动时隐藏/显示）

这种方案在用户向下滚动页面时隐藏客服按钮，向上滚动时显示，避免了遮挡内容,同时保证了客服入口的可达性。

特点：

：滚动时自动隐藏,提供更干净的浏览体验。
智能感知：能感知用户的滚动方向。
实现稍复杂：需要用到JavaScript来监听滚动事件。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">智能悬浮QQ客服</title>
    <style>
        body { margin: 0; font-family: sans-serif; }
        .content { height: 3000px; padding: 20px; background: #fafafa; text-align: center; }
        /* 客服按钮容器 */
        .smart-qq-container {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1000;
            transition: transform 0.3s ease, opacity 0.3s ease; /* 添加过渡效果 */
        }
        /* 隐藏状态的类 */
        .smart-qq-container.hidden {
            transform: translateY(150%); /* 向下移动超出视口 */
            opacity: 0;
        }
        .smart-qq-btn {
            width: 100px;
            height: 100px;
            background-image: url('https://pub.idqqimg.com/qconn/wpa/assets/img/icon-qq.png');
            background-size: cover;
            border-radius: 50%;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
            display: block;
        }
        .smart-qq-btn:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>智能悬浮客服示例</h1>
        <p>请尝试向下滚动页面，客服按钮会隐藏，然后向上滚动，它会再次出现。</p>
    </div>
    <!-- 智能悬浮的QQ客服按钮 -->
    <div class="smart-qq-container" id="smartQqContainer">
        <a href="tencent://message/?uin=您的QQ号码&Site=&Menu=yes" class="smart-qq-btn" target="_blank" rel="noopener noreferrer"></a>
    </div>
    <script>
        // 获取客服按钮容器
        const container = document.getElementById('smart-qqContainer');
        // 记录上一次滚动位置
        let lastScrollTop = 0;
        // 监听滚动事件
        window.addEventListener('scroll', function() {
            // 获取当前滚动位置
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            // 如果当前滚动位置大于上一次的位置，说明是向下滚动
            if (scrollTop > lastScrollTop && scrollTop > 100) {
                // 向下滚动且滚动超过100px，隐藏按钮
                container.classList.add('hidden');
            } else {
                // 向上滚动，显示按钮
                container.classList.remove('hidden');
            }
            // 更新上一次的滚动位置
            lastScrollTop = scrollTop;
        });
    </script>
</body>
</html>

代码解释：

CSS:
- .smart-qq-container 添加了 transition 属性，让 transform 和 opacity 的变化有动画效果，而不是瞬间消失/出现。
- .smart-qq-container.hidden 定义了隐藏状态：通过 transform: translateY(150%) 将元素向下移动自身高度的1.5倍，确保它完全移出屏幕；opacity: 0 使其完全透明。
JavaScript:
- window.addEventListener('scroll', ...) 监听整个窗口的滚动事件。
- window.pageYOffset 获取当前垂直滚动位置。
- if (scrollTop > lastScrollTop && scrollTop > 100) 是核心逻辑：
  - scrollTop > lastScrollTop 判断滚动方向是否向下。
  - scrollTop > 100 增加一个阈值,避免在页面顶部小幅抖动时按钮频繁闪烁。
- 根据判断结果，通过 classList.add('hidden') 或 classList.remove('hidden') 来切换按钮的显示和隐藏。

如何选择？

如果你只需要一个简单的客服入口：选择 方案一,最简单直接。
如果你有多个客服，希望界面更精致：选择 方案二,用户体验更好。
如果你的页面内容很长，担心客服按钮会遮挡内容：选择 方案三，最智能、最友好。

希望这些代码和解释能帮助到您！