jQuery实现网页侧栏工具条

效果图

toolbar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toolbar</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/toolbar.css">
</head>
<body>
    顶部
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe617;</i>
            <span class="toolbar-text transition">会员</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe613;</i>
            <span class="toolbar-text transition">购物车</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe616;</i>
            <span class="toolbar-text transition">我的关注</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe614;</i>
            <span class="toolbar-text transition">我的消息</span>
        </a>
        <!-- href属性设置为#，可以点击直接回到顶部 -->
        <a href="#" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe615;</i>
            <span class="toolbar-text transition">顶部</span>
        </a> 
    </div>
</body>
</html>

base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
toolbar.css

html,body{
    height:2000px;
    background-color:pink;
}
.transition{
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -ms-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
}
/*icon*/
@font-face {
    font-family: "iconfont";
    src: url('../test/font/iconfont.eot?t=1477124206');
    /* IE9*/
    src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
    url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
    /* iOS 4.1- */
}

.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
/*toolbar*/
.toolbar{
    position: fixed;
    right:0;
    top:50%;
    margin-top:-102px;
    z-index:2;
}
.toolbar-item{
    display: block;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    color:#fff;
    border-bottom:1px solid #fff;
    position: relative;
}
.toolbar-icon{
    display: block;
    background-color:#b7bbbf;
    font-size:20px;
    position: relative;
    z-index:2;
}
.toolbar-text{
    width:62px;
    height:40px;
    position: absolute;
    top:0;
    left:0;
}
.toolbar-item:hover .toolbar-icon{
    background-color:#71777d;
}
.toolbar-item:hover .toolbar-text{
    background-color:#71777d;
    left:-62px;
}

这种方式不需要用到js，给a链接添加href="#" 即可

不过这样点击之后在网址栏上会出现#，如果不希望出现的话，也可以用js来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toolbar</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/toolbar.css">
</head>
<body>
    顶部
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe617;</i>
            <span class="toolbar-text transition">会员</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe613;</i>
            <span class="toolbar-text transition">购物车</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe616;</i>
            <span class="toolbar-text transition">我的关注</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe614;</i>
            <span class="toolbar-text transition">我的消息</span>
        </a>
        <a href="javascript:;" class="toolbar-item" id="backToTop">
            <i class="toolbar-icon icon">&#xe615;</i>
            <span class="toolbar-text transition">顶部</span>
        </a>
    </div>

    <script src="../js/jquery.js"></script>
    <script src="../js/toolbar.js"></script>
</body>
</html>

css跟上面的一样

toolbar.js

// 不要暴露在全局，使用匿名函数自执行
(function($){

    "use strict";

    //回到顶部
    $("#backToTop").on("click",function(){
        $("html,body").animate({
            scrollTop:0
        })
    })


})(jQuery);

来源：https://www.cnblogs.com/chenyingying0/p/12404404.html

标签

toolbar

font

jquery

transition