jQuery实现返回顶部按钮功能-白红宇

jQuery实现返回顶部按钮功能

阅读量：6813 次

发布时间：2019-06-26

本文共 1165 字，大约阅读时间需要 3 分钟。

html结构


                   
                                              //图标字体                    返回
顶部

css样式

.toolbar{
         position: fixed;    right: 10px;    bottom: 20px;}.toolbar-item{
         position: relative;    display: block;    width: 50px;    height: 50px;    &:hover{        .toolbar-icon{            top: -@toolbar-size;        }        .toolbar-text {
                 top: 0;        }    }}.toolbar-btn{
         position: absolute;    left: 0;    top: 0;    width: 50px;    height: 50px;    overflow: hidden;    .toolbar-icon{        position: absolute;        left: 0;        top: 0;        width: 50px;        height: 50px;        background-color: #ccc;        font-size: 30px;        color: #fff;        text-align: center;        transition: top 1s;    }     .toolbar-text{
             position: absolute;        left: 0;        top: 50px;        width: 50px;        height:50px;        background-color: #A0A0A0;        font-size: 14px;        color: #fff;        text-align: center;        transition: top 1s;    }}