纯CSS实现侧边悬浮框 + 鼠标移入展示二维码效果，js调用scrollTop实现返回页面顶部功能

利用css属性 position : fixed; 来实现固定在窗口中某个位置（一般是左侧或右侧）。点击查看该属性具体详情

利用css属性 :hover 选择器，来控制相应元素的显示隐藏，实现展示二维码的显示隐藏。点击查看该属性具体详情

效果如图：

image

贴出源码：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>侧边悬浮窗demo</title>
    <style>
        .sidebar {
            position         : fixed;
            z-index          : 88;
            right            : 0;
            bottom           : 23%;
            padding          : 14px 12px 0;
            box-shadow       : 0 4px 38px 0 rgba(255, 96, 115, 0.2);
            border-radius    : 20px 0 0 20px;
            background-color : #45ccbd;
        }
        .sidebar > div {
            cursor     : pointer;
            text-align : center;
        }
        .sidebar > div img {
            width : 40px;
        }
        .sidebar > div h3 {
            font-size : 15px;
            font-weight: 500;
            color : #fff;
        }
        .sidebar > div .code {
            display          : none;
            position         : absolute;
            z-index          : 9;
            top              : 55%;
            right            : 90px;
            border-radius    : 8px;
            box-shadow       : 0 6px 12px 0 rgba(106, 115, 133, 0.22);
            background-color : #ffffff;
        }
        .sidebar > div .code:after {
            position     : absolute;
            top          : 33%;
            left         : 100%;
            content      : '';
            transform    : translateY(-50%);
            border-width : 5px;
            border-style : solid;
            border-color : transparent transparent transparent #ffffff;
        }
        .sidebar-wechat:hover .code {
            display : block;
        }
    </style>
</head>
<body>
<aside class="sidebar">
    <div>
        <img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
             alt="联系客服icon">
        <h3>
            在线客服
        </h3>
    </div>

    <div>
        <img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
             alt="联系客服icon">
        <h3>
            APP下载
        </h3>
    </div>

<!-------------------   鼠标移入展示二维码    ---------------->
    <div class="sidebar-wechat">
        <img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
             alt="联系客服icon">
        <h3>
            公众号
        </h3>
        <div class="code">
            <img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
                 alt="联系客服icon">
        </div>
    </div>

    <div onclick="toTop()">
        <img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
             alt="联系客服icon">
        <h3>
            回顶部
        </h3>
    </div>
</aside>
</body>

<script>
// 回到顶部效果使用js实现
function toTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>
</html>

纯CSS实现侧边悬浮框 + 鼠标移入展示二维码效果，js调用scrollTop实现返回页面顶部功能

推荐阅读更多精彩内容