官网、活动页右侧常钉一列快捷入口：QQ、微信二维码、回顶部。滚多深都在视口右边，悬停二维码钮左边弹出大图，点回顶部慢慢滚回页头。
入口是 index.html。样式在 css/sidebar.css，回顶部在 js/sidebar.js。脚本先引 jQuery，再引 sidebar.js。jQuery 掉到后面，$ 会挂。
悬浮侧边栏用到哪些文件
html 里按这个顺序引：
页面就这几样：一块 .side-sidebar，里面三颗 li。前两颗各自藏一个 .sidebar-code，第三颗加 .backTop。图标路径写在 img 的 src 上。维护的时候把入口指到 index.html 就行。
页面骨架
QQ 那颗的 href 业务里换成客服链接；二维码大图换成项目自己的。本例两颗都挂了 .sidebar-code，只要悬停就会出图，不需要的去掉那一层就行。
侧边栏如何布局
.side-sidebar 用 position: fixed，相对浏览器窗口定位，页面再往下滚，它也钉在视口里。top: 30%、right: 20px 卡在右侧偏上，z-index: 999 盖在正文上面，别被轮播、导航挡住。
里面 ul 宽 80，每颗 li 也是 80×80，背景 #105893，悬停改成 #F59D27。图标绝对居中，max-width、max-height 各 50%，图大一点也不会撑破格子。可点区域加 cursor: pointer。
我第一次看也卡了一下：父级已经是 fixed，子级 absolute 是相对这颗 li，不是相对整页。所以二维码大图写 right: 100px，就是相对当前这颗钮往左挪，正好贴在侧栏左边。
小屏用媒体查询直接藏掉整块侧栏，窄屏上 80 宽的柱子太挡内容：
top、right、格子尺寸按设计稿改。断点本例写成 767，跟常见手机宽对齐，项目有别的断点跟着改。
悬停如何显示二维码
二维码大图包在 .sidebar-code 里，默认 display: none。鼠标进这颗 li，用 li:hover .sidebar-code 改成 display: block，离开自动藏回去。纯 CSS，不用写 JS。
大图宽高 240，绝对定位在钮左边：right: 100px 是侧栏宽再加一点空隙，top: -85px 往上抬一点，让大图中心大致对齐当前钮，不要整块贴在钮正左、看起来偏下。
说白了：平时藏着，悬停靠 CSS 揭开。r_code.jpg 换成业务二维码；多颗钮要不同图，各自换自己的 src 就行。大图被页面左边裁切的话，把 right 调小一点，或改成往上弹。
返回顶部如何实现
第三颗 li 加类名 .backTop。点下去让页面滚回顶部。用 jQuery 的 animate 改 scrollTop，html 和 body 一起写，兼容不同浏览器。
事件挂在 body 上用 on 委托，后面若动态插入侧栏也还能点：
"slow" 是 jQuery 自带的慢速；要固定毫秒就写成数字，比如 400。这坑我见过不止一次：只绑 $(".backTop").click(...)，侧栏是后插进页面的就点不动，委托写在 body 上更稳。
如何对接到真实项目中
把 css/sidebar.css、js/sidebar.js、images 里四张图拷进项目，页面按下面这份接。QQ 的 href 换成客服地址，二维码图换成业务图。没有客服链接就留 javascript:;，或改成电话、在线客服页。
jQuery 这套建议用 Layui 做提示，具体按实际项目来定。本例回顶部没有失败态，一般不用弹提示。
图标和二维码路径按项目目录改。侧栏颜色、top、小屏断点跟着设计走。要加第四颗钮，照着再写一颗 li 即可。