Back to top side button

1.html

 <dl class="toolbar">
        <dd class="qq"><a href="tencent://message/?uin=123456&Menu=yes"><i></i><span>在线客服</span></a></dd>
        <a href="tel:{pboot:companyphone}"><dd class="tel"><i></i><span>服务热线</span>
            <div class="box">
                <p>服务热线</p>
                <h3>{pboot:companyphone}</h3>
            </div>
        </dd>
        </a>
        <dd class="code d-none d-lg-block"><i></i><span>微信咨询</span>
            <div class="box"><img src="{pboot:companyweixin}" alt="{pboot:companyname}" />
            </div>
        </dd>
        <dd class="top" id="top"><i></i><span>返回顶部</span></dd>
    </dl>

2.css

.toolbar {
    position: fixed;
    top: 50%;
    right: 1%;
    margin-top: -163px;
    z-index: 100;
    width: 80px;
}

.toolbar dd {
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    background: #0c4197;
    margin-top: 2px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    cursor: pointer;
    transition: all .5s;
}

.toolbar dd:first-child {
    margin-top: 0;
}

.toolbar dd i {
    width: 100%;
    height: 30px;
    display: block;
    margin-top: 13px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAB4CAYAAADlnULlAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RjNENzlCOURDQjUxMUVBQTA0QkYxOEY5MzE3MDEzQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RjNENzlCQURDQjUxMUVBQTA0QkYxOEY5MzE3MDEzQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRGM0Q3OUI3RENCNTExRUFBMDRCRjE4RjkzMTcwMTNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRGM0Q3OUI4RENCNTExRUFBMDRCRjE4RjkzMTcwMTNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kkLazQAABeBJREFUeNrsmg9oVVUc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) no-repeat center 0;
}

.toolbar dd.qq i {
    background-position-y: 0;
}

.toolbar dd.tel i {
    background-position-y: -30px;
}

.toolbar dd.code i {
    background-position-y: -60px;
}

.toolbar dd.top i {
    background-position-y: -90px;
}

.toolbar dd span {
    display: block;
    color: #fff;
}

.toolbar dd.tel .box {
    position: absolute;
    top: 0;
    width: 190px;
    right: -200px;
    height: 100%;
    margin-right: 10px;
    border-radius: 5px;
    background: #0c4197;
    opacity: 0;
    transition: all .5s;
}

.toolbar dd.tel .box p {
    font-size: 14px;
    margin: 15px auto 7px;
    color: #fff;
}

.toolbar dd.tel .box h3 {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.toolbar dd.tel .box:after {
    display: block;
    content: " ";
    border-style: solid dashed dashed dashed;
    border-color: transparent transparent transparent #0c4197;
    border-width: 9px;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    margin-top: -9px;
    right: -18px;
    margin-left: -12px;
}

.toolbar dd.code .box {
    position: absolute;
    top: 0;
    width: 162px;
    right: -172px;
    height: 162px;
    margin-right: 10px;
    border-radius: 5px;
    background: #0c4197;
    opacity: 0;
    transition: all .5s;
}

.toolbar dd.code .box img {
    width: 140px;
    height: 140px;
    padding: 11px;
}

.toolbar dd.code .box:after {
    display: block;
    content: " ";
    border-style: solid dashed dashed dashed;
    border-color: transparent transparent transparent #0c4197;
    border-width: 9px;
    width: 0;
    height: 0;
    position: absolute;
    top: 30px;
    right: -18px;
    margin-left: -12px;
}

.toolbar dd:hover {
    background: #333;
}

.toolbar dd.tel:hover .box {
    opacity: 1;
    right: 80px;
}

.toolbar dd.code:hover .box {
    opacity: 1;
    right: 80px;
}

3.js

 <script>
 $(document).ready(function(){
    $("#top").click(function(){
      $("body, html").stop().animate({
         "scrollTop": 0
       });
    });
});
       
</script