直接使用代码

图片素材

无

css代码

   <style>
    .clear:after{content:'\20';display:block;height:0;clear:both;visibility:hidden}
    .yb_conct{position:fixed;z-index:9999999;top:200px;right:-127px;cursor:pointer;transition:all .3s ease}
    .yb_bar ul li{width:180px;height:53px;font:15px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:3px;border-radius:3px;transition:all .5s ease;overflow:hidden}
    .yb_bar .yb_top{background:#ff4a00 url(http://www.bootfastui.cn/img/2020/1229/fixCont.png) no-repeat 0 0}
    .yb_bar .yb_phone{background:#ff4a00 url(http://www.bootfastui.cn/img/2020/1229/fixCont.png) no-repeat 0 -57px}
    .yb_bar .yb_QQ{text-indent:0;background:#ff4a00 url(http://www.bootfastui.cn/img/2020/1229/fixCont.png) no-repeat 0 -113px}
    .yb_bar .yb_ercode{background:#ff4a00 url(http://www.bootfastui.cn/img/2020/1229/fixCont.png) no-repeat 0 -169px}
    .hd_qr{padding:0 29px 25px 29px}
    .yb_QQ a{display:block;text-indent:54px;width:100%;height:100%;color:#fff}
</style>

HTML+JS代码

 <div style="height:1500px"></div>
<script>
    $(function () {
        // 悬浮窗口
        $(".yb_conct").hover(function () {
            $(".yb_conct").css("right", "5px");
            $(".yb_bar .yb_ercode").css('height', '200px');
        }, function () {
            $(".yb_conct").css("right", "-127px");
            $(".yb_bar .yb_ercode").css('height', '53px');
        });
        // 返回顶部
        $(".yb_top").click(function () {
            $("html,body").animate({
                'scrollTop': '0px'
            }, 300)
        });
    });
</script>
<div class="yb_conct">
    <div class="yb_bar">
        <ul>
            <li class="yb_top">返回顶部</li>
            <li class="yb_phone">400-021-5756</li>
            <li class="yb_QQ">
                <a target="_blank" href="">在线咨询</a>
            </li>
            <li class="yb_ercode" style="height:53px;">关注我们 <br>
                <img class="hd_qr" src="/Public/images/erweima.png" width="180" alt="关注我们">
            </li>
        </ul>
    </div>
</div>