侧边悬浮按钮,点击移动到顶部和底部

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25781517/article/details/80909240
// 侧边按钮
    $(".suspension .a-top").click(function () {
        $("html,body").animate({scrollTop: 0});
        return false;
    });
    $(".suspension .a-bottom").click(function () {
        $("html,body").animate({scrollTop: $(document).height()}, 1000);
        return false;
    });
    $(window).scroll(function () {
        var st = $(document).scrollTop();
        var $top = $(".suspension .a-top,.suspension .a-bottom");
        if (st > 100) {
            $top.css({display: 'block'});
        } else {
            if ($top.is(":visible")) {
                $top.hide();
            }
        }
    })
<!-- 悬浮按钮 -->
            <div class="suspension">
                <div class="suspension-box">
                    <a href="#" class="a a-top">
                        <i class="fa fa-angle-double-up i" aria-hidden="true"></i>
                    </a>
                </div>
                <div class="suspension-box">
                    <a href="#" class="a a-bottom">
                        <i class="fa fa-angle-double-down i" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
/*悬浮按钮*/
.suspension{
    position:fixed;
    z-index:55;
    bottom:85px;
    width:44px;
    height:50%;
    right: 10px;
}
.suspension-box{
    position:relative;
    float:right;
}
.suspension .a{
    text-align: center;
    display: block;
    vertical-align: middle;
    line-height: 44px;
    width:44px;
    height:44px;
    background-color:#353535;
    margin-bottom:4px;
    cursor:pointer;
    outline:none;
}

.suspension .a .i{
    width:44px;
    height:44px;
    color: #fff;
    font-size: 25px;
}

.suspension .a-top,.suspension .a-bottom{
    background:#D2D3D6;
    display:none;
}

.suspension .a-top:hover,.suspension .a-bottom:hover{
    background:#c0c1c3;
}
/*结束*/
阅读更多

没有更多推荐了,返回首页