现在，人们在浏览网站时，经常会发现一些浮动条，通常具有向上和向下的功能。当你点击时，你可以很容易地回到顶部或底部。事实上，构建这样一个工具侧边栏并不是很困难，使用jquery就可以轻松完成。接下来，你按照我的步骤一步一步来，然后你可以根据这段代码进行一些修改和定制一些东西。

不用多说，让我来谈谈我制作的这个工具的侧边栏。这个工具侧边栏符合我自己的模板“Q21”，特点是黑白对比，所以这个工具侧边栏要突出黑白变化。构思之后，我决定这个侧边栏的风格如下：

当鼠标移动到“共享”按钮上时，一个黑条会自动滑出，然后所有的共享按钮都会出现在黑条上。具体演示效果，可以下载最终的代码包查看。让我们一步一步来。

建立html结构。

Span标签没问题，但是我还是喜欢用div，所以用div来构建html结构。结构很清楚，对吧？一个大div包含三个小div，分别是上、中、下按钮。其中，需要在共享按钮中包含一个div才能滑出共享按钮。好了，结构搭建好了。

div id=" tooltip " div id=" toolkit "/div id=" toolkit " div id=" share txt " share/div id=" share it " class=" none "这里是share code/div/div id=" toolkit " 96/div/div注意，上、下按钮是我用的。如果是图片，需要加载，而且是动态变化的，更换图片比较不方便。至于上下三角形怎么打，就看你的搜狗输入法了，如下图：

好了，有了html结构，让我们定义一些css。

CSS代码

首先，定义全局字体。

: root { font-family : " 5 fae8f 6f 96 c 59 ed 1 "，helvetica，Arial}经过测试，这个侧边栏在微软雅黑字体下效果最好，所以网页需要使用微软雅黑。在上面的代码中，root表示选择html root，对文档中的所有元素都有效，其中5FAE8F6F96C59ED1表示微软雅黑。至于为什么是这样写而不是“微软雅黑”，如果用户的电脑是英文的，那字体微软雅黑就找不到了。如果是这样写的，只要有微软雅黑字体就可以用。定位工具栏。

div[id=" tooltip "]{ width :40 px；高度：120 px；位置：固定；底部：50%；right:20px}这些css定义了工具边栏的高度和宽度，以及位置：fixed表示固定在页面上，不会根据滚动条移动。底部：50%，保持在页面中间，右侧：20px表示保持右边20像素。响应操作

div[id^="tool"]{字体大小：38像素；cursor:pointer指针；color: # 000000}div[id^="tool"]:hover{配色： # 999999；} Response操作可以让工具更加人性化，比如上面显示的效果，当我们将鼠标移动到箭头处时，它会变成灰色，表示你已经将箭头移动到了顶部。在这里，我使用了一个新的选择器div [id="tool"]，这意味着选择所有以tool开头的div标签。将字体大小定义为38px，并将三角形调整到合适的大小。设置光标：指针属性，当你将鼠标移动到它上面时，它会以手指的形状显示，这让你误以为它是一个可点击的链接。以下语句，当您将鼠标移动到它上面时，颜色变为# 99999。这是一个改善用户体验的响应操作。中间CSS代码。

div[id=" toolc "]{ font-size :22 px；右浮动：宽度：40 px；高度：70 px；飞越：隐藏；} div[id=" share txt "]{ width :26 px；右边距：8 px；右浮动：高度：70 px；display:inlinemargin-top :4 px；} div[id=" share it "]{ width :304 px；height:62px右浮动：高度：30 px；margin:15px 0px}.无{ display:none}.内联{ display:inline}比较简单，没有亮点。你自己看看就行了。重点是如何实现共享按钮的滑动外观。我的方法是定义两个div并浮动它们。默认情况下，共享按钮的div是隐藏的，只有在鼠标移动到触发器后才会显示。

Jquery代码

在添加jquery代码之前，我们需要彻底阐明滑出式共享按钮的实现。Jquery没有提供横向滑动的方法，那么如何实现呢？这可以通过首先将背景颜色变成黑色来实现，这样就会出现用于加载共享按钮的div框。但是，此时由于宽度不足以显示共享按钮div，暂时无法看到。使用jquery的动画方法逐渐加宽宽度，直到共享按钮div完全显示。这将造成一种错觉，即黑色滑出，然后共享按钮出现。

具体实现代码如下。

$ (function () {$ ("# toolc ")。mouseenter(function(){//这里，mouse enter方法用于触发。鼠标上移后，触发此方法$ ("# toolc ")。CSS ({"color" : "# ffffff "，" backgroundcolor" 33。//在中间添加背景，将文本变成白色$ ("# shareit ")。removeclass(“无”)。add class(" inline ")；//从shareit中删除none并让它显示，但由于宽度不足，$ ("# toolc ")。动画({width : "350px"}，200)无法显示；//使用animate方法动态改变宽度，直到显示按钮共享为止})。mouseleave(function(){ //当鼠标从目标区域移开时，会出现以下事件$ ("# toolc ")。CSS ({“颜色”:“# 00000”，“背景色”33330)。//$ ("# shareit ")。removeclass(“内联”)。addclass(“无”)；//$(“# toolc”)。动画({width : "40px"}，200)；//矛盾，你懂的})；$(“# toolt”)。单击(function(){ $(“html，body”)。动画({scrollTop:"-=900px"}，200)；//每次点击，向上滑动900 px })；$(“# toolb”)。单击(function(){ $(“html，body”)。动画({scrollTop:"=900px"}，200)；//每次点击，向下滑动900 px })；});我已经在上面的代码中写了注释，所以请仔细耐心地看看。这里我想说的是上下滑动900px。我没有让它直接点击顶部或底部。因为我觉得，如果文章很长，观众不一定想直接滑到底部，而是想看下面的内容。如果他真的想滑到底部，只需要点击两三次按钮。这也是用户体验的一个细节。