标签：
先从js事件来考虑，这个功能是怎么实现的。
1：当下滑鼠标的时候，出现按钮。
2：点击按钮，回到顶部。按钮隐藏。
（1）先弄个占位符，按钮要在哪个位置显示
1 <!-- 扩展 id 也可以有样式，不过是#id显示--> 2 <ul id="jump"> 3 <!-- display:none:内联标签 tops 点击 之后 到top--> 4 <li style="display: none; height: 50px;"><a id="tops" href="#top" title="返回顶部"></a></li> 5 <!-- <li style=""></li> --> 6 </ul>
（2）滑动鼠标，触发事件；当超过多少距离的时候，显示，或者隐藏
1 $(window).scroll(function() { 2 if ($(window).scrollTop() > 50) { 3 $(‘#jump li:eq(0)‘).fadeIn(800);//逐渐显示 4 } else { 5 $(‘#jump li:eq(0)‘).fadeOut(800);//逐渐隐藏 6 } 7 });
（3）点击按钮，触发事件；以动画效果回到顶部
1 $("#top").click(function() { 2 $(‘body,html‘).animate({scrollTop:0},400);//以动画的效果返回 3 });
接着来说说他的样式：
1：在哪个位置出现，占位符在哪里2：按钮的样式
（1）：首先肯定是占位符的样式吧，在哪里出现
1 /*出现的位置*/ 2 #jump{ 3 position:fixed; /*position:定位 fixed：相对于窗口*/ 4 _position:absolute; 5 top:400px; /*距离顶端400像素*/ 6 _top:expression(documentElement.scrollTop + "px"); 7 left: 50%; /*元素自己距离左边的多少*/ 8 margin-left:550px; /*margin外边框属性*/ 9 _margin-right:0px; 10 width:40px; 11 z-index: 400; /*元素的叠队顺序*/ 12 }
（2）：点击按钮的样式与背景
1 /*点击框的样式*/ 2 #tops{ 3 display:block; /*元素应该生成框的类型*/ 4 width:40px; 5 height:42px; 6 cursor:pointer; /*要显示的光标的形状 这个是一个手*/ 7 } 8 /*背景图片*/ 9 #tops{ 10 background:url(../img/top.png) repeat scroll 0% 0% transparent;/*背景图片*/ 11 }
（3）当把鼠标放在按钮上显示的样式
1 /*鼠标放在上面就会显示的样式*/ 2 #tops:hover{ 3 background:url(../img/toped.png) repeat scroll 0% 0% transparent; 4 }
然后他就出来了，哈哈。
总结
标签：
原文地址：http://www.cnblogs.com/IDomyself/p/4818573.html
