Jquery打造回到顶部按钮
一直以来都想弄一个回到顶部按钮，但是在网上找了一些教程都不太好用，所以搁浅了下来。今天早上，浏览我爱水煮鱼的博客时发现了全代码打造简洁美观回到顶部按钮这篇文章，欣喜之下，在自己博客上试了试，效果不错。具体方法在下面。
HTML 结构
1 2 3 | <a id="gotop" href="#"> <span>▲</span> </a> |
上面的代码我放在了single.php页面，我感觉主页没必要放这个，一般都不长。
CSS 代码
1 2 3 4 5 6 7 8 9 10 11 12 | #gotop{ display:block; width:60px; height:60px; position:fixed; bottom:50px; right:40px; border-radius:10px 10px 10px 10px; text-decoration:none; display:none; background-color:#999999; } |
上面这段代码，定义了 a 标签的外观样式，定义 display 为 block，这样，我们才能指定它的 width 和 height。定义 position 为fixed，让它固定在右下角。同时为它指定圆角，就是使用 border-radius 属性，定于半径为10px的圆角。
1 2 3 4 5 6 7 8 9 10 11 12 13 | #gotop span{
display:block;
width:60px;
color:#dddddd;
}
#gotop span:hover{
color:#cccccc;
}
#gotop span{
font-size:40px;
text-align:center;
margin-top:4px;
} |
上面这一段，就是定义了 span 标签里面的三角号，至于如何打出这个“三角号”，使用搜狗输入法，按下“Ctrl + Shift + z”，就会弹出搜狗的特殊字符，就可以找到了。这几句代码意思很简单，就是定义了三角号的外观样式，同时制定了颜色变化，这是为了用户体验。最下面的 margin-top：4px，则是用来准确定位三角号，让它居中显示。
jQuery 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function(){ $(window).scroll(function(){ //只要窗口滚动,就触发下面代码 var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度 if( scrollt >200 ){ //判断滚动后高度超过200px,就显示 $("#gotop").fadeIn(400); //淡出 }else{ $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动 } }); $("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部 $("html,body").animate({scrollTop:"0px"},200); }); }); |
总结
这样就大功告成了，他有两个缺点：一是在ie6下无法工作，二是一个页面来回滚动之后就基本上变成透明的了，不过都不太影响使用。
本文出自 TENNFY博客，转载时请注明出处及相应链接。
本文永久链接: https://www.tennfy.com/169.html
saiya:
kong:
Faris:
路易大叔:
moda:
IE6是不是没有用？
是的