jQuery实现网页侧栏工具条
程序员文章站
2022-07-09 20:01:14
效果图 toolbar.html toolbar ......
效果图
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"></i>
<span class="toolbar-text transition">会员</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">购物车</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的关注</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的消息</span>
</a>
<!-- href属性设置为#，可以点击直接回到顶部 -->
<a href="#" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">顶部</span>
</a>
</div>
</body>
</html>
base.css
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"></i>
<span class="toolbar-text transition">会员</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">购物车</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的关注</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的消息</span>
</a>
<a href="javascript:;" class="toolbar-item" id="backtotop">
<i class="toolbar-icon icon"></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);