1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.toolbar{
    width: 50px;
    position: fixed;
    right: 20px;
    top: 50%;
    margin-top: -87px;
    cursor: pointer;
    z-index: 10000;
    background: #ffffff;
    border-radius: 4px;
}
</style>
1
2
3
4
5
6
7
8
9
<div class="toolbar hidden" id="toolbar">
    <div class="wrap">
        <a href="javascript:void(0);" class="bb"><img src="images/bar-1.png"></a>
        <a href="javascript:void(0);" class="bb"><img src="images/bar-2.png"></a>
        <a href="tencent://message/?Menu=yes&amp;uin=2850281384" class="bb"><img src="images/bar-3.png"></a>
        <a href="javascript:void(0);" class="bb"><img src="images/bar-4.png"></a>
        <a href="javascript:void(0);" id="back-top"><img src="images/bar-5.png"></a>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $('#toolbar').fadeIn(1000);
        } else {
            $("#toolbar").fadeOut(1000);
        }
    });
    $("#back-top").click(function() {
        $('body,html').animate({
            scrollTop: '0'
        }, 1000);
        return false; //防止默认事件行为
    });
</script>