jQuery实现网页侧栏工具条

效果图

toolbar.html

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

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:
    -ms-transition:
    -o-transition:
    transition:all .5s;
}
/*icon*/
@font-face {
    font-family: "iconfont";
    src: url('../test/font/iconfont.eot?t=1477124206');
     IE9*/ url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), IE6-IE8 */
    url('../test/font/iconfont.woff?t=1477124206') format('woff'),1)"> chrome,firefox 
    url('../test/font/iconfont.ttf?t=1477124206') format('truetype'),firefox,opera,Safari,Android,iOS 4.2+
    url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
     iOS 4.1- */
}

.icon { "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;
    line-height:
    text-align:center;
    color:#fff;
    border-bottom:1px solid #fff; relative;
}
.toolbar-icon{#b7bbbf;20px; relative;
.toolbar-text{62px; absolute;
    left:0;
}
.toolbar-item:hover .toolbar-icon{#71777d;
}
.toolbar-item:hover .toolbar-text{#71777d;-62px;
}

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

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

="toolbar-item" id="backToTop">

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

css跟上面的一样

toolbar.js

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

    "use strict";

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


})(jQuery);

jQuery实现网页侧栏工具条

相关文章