img

bootstrap框架返回顶部效果和样式

2020-04-06 0条评论 2.7k次阅读 CSS


加载 jquery-scollup 文件

<script src="http://cdn.bootcss.com/scrollup/2.4.0/jquery.scrollUp.min.js"></script>

js代码内容

$(function () {
    $.scrollUp({
        scrollName:"scrollUp",
        topDistance:"300",
        topSpeed:300,
        animation:"fade",
        animationInSpeed:200,
        animationOutSpeed:200,
        scrollText:'<i class="fa fa-angle-up"></i>',
        activeOverlay:!1
    });
});

css内容

/*返回顶部样式*/
#scrollUp {
    background-color: #777;
    color: #eee;
    font-size: 40px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    bottom: 20px;
    right: 20px;
    overflow: hidden;
    width: 46px;
    height: 46px;
    border: none;
    opacity: .8;
}

#scrollUp:hover{background-color:#333}
@media screen and (min-width:992px){#scrollUp{bottom:80px}}

转自:http://www.baiyongj.com/news/473.html

💬 COMMENT


🦄 支持markdown语法

👋友