jQuery和CSS3制作回到页面顶部和底部
作者：大漠 日期：2012-01-06 点击：1430
当一个页面的篇幅太长时，用户的检验就有点烦，特别是当用户要到页面的底部或顶部时，只靠scrollBar来操作的确不爽，我有时也烦。当然，W3cplus也有这样的不足之处，好多朋友都有提过，于是在第二版本中我加了一个回到顶部的效果，但不知道怎么加回到底的效果。因为自己的jQuery还处在学习的初级阶段，属于半吊子中的半吊子，时常依赖别人的插件来做效果。比如说，前面介绍的《jQuery制作go to top按钮》中介绍的回到页面顶部的四个demo效果，都是到处整来的，有时只知道其表，不知道其质。真是感到惭愧呀。
今天在Codrops站上看到了cody利用James的special scroll events写了一篇有关于回到页面顶部和底部的教程——Scrolling to the Top and Bottom with jQuery。于是我也认真学习了一回，虽然不懂那个插件怎么来的，但还是明白了如何利用这个插件来做这要的效果。于是我在这个效果上整了一些CSS3的效果，制作了一个类似于本站的回到页面顶部Button的效果。整理了出来与大家分享，希望对不懂的朋友有所帮助。那我们开始吧：
要实现的效果
正如上图所示，两个Button将固定在浏览器的右下角，当scrollBar在移动动，两个buttons会改变其透明度，当你停止移动scrollbar时，又将恢复到默认状态。最主要的是你点击“回到顶部”的button时，页面将到达顶部，反之，你点击“到达页面底部”的button时，页面将到达底部。下面我们就一起来看看如何实现上面的效果。
HTML Markup
<body>
<div id="wrapper">content here</div>
<div id="topBottomBar">
<div id="goToTop" class="goToTop">回到顶部</div>
<div id="goToBottom" class="goToBottom">回到顶部</div>
</div>
</body>
这个结构可是相当的简单了，我把页面所有的内容放置在元素“div#wrapper”容器之中，而两个buttons放在了“div#topBottomBar”容器之中。这里不花太多时间，我想没人不懂的。
CSS Code
有了结构，那接下来就需要使用CSS来制作两个button的外观，我在此处配合了图片和CSS3制作了两个相对称的效果，具体的大家请看下面代码：
*{
margin: 0;
padding: 0;
}
/*==固定buttons在浏览器的右下角处==*/
#topBottomBar {
position: fixed;水月
right: 50px;
bottom:5px;
z-index: 9000;
}
/*==制作buttons的外型==*/
#topBottomBar div {
/*==button中间的箭头==*/
background: url("images/gototop.png") no-repeat scroll center #F3F3F3;
/*==多颜色边框效果==*/
border-color: rgba(203, 78, 255, 0.2) rgba(213, 178, 255, 0.1) rgba(113, 178, 133, 0.1) rgba(220, 100, 200, 0.1);
/*==不规则圆角效果==*/
-moz-border-radius: 45px 80px 0 125px / 70px 130px 12px 69px;
-webkit-border-radius: 45px 80px 0 125px / 70px 130px 12px 69px;
border-radius: 45px 80px 0 125px / 70px 130px 12px 69px;
border-style: solid;
border-width: 1px;
/*==多层阴影==*/
-moz-box-shadow: 0 0 5px rgba(125, 25, 125, 0.3) inset, 1px 1px 1px rgba(125, 25, 125,0.1), 2px 2px 1px rgba(125, 25, 125,0.3), -1px -1px 2px rgba(125, 25, 125,0.1), -2px -2px 1px rgba(125, 25, 125,0.2);
-webkit-box-shadow: 0 0 5px rgba(125, 25, 125, 0.3) inset, 1px 1px 1px rgba(125, 25, 125,0.1), 2px 2px 1px rgba(125, 25, 125,0.3), -1px -1px 2px rgba(125, 25, 125,0.1), -2px -2px 1px rgba(125, 25, 125,0.2);
box-shadow: 0 0 5px rgba(125, 25, 125, 0.3) inset, 1px 1px 1px rgba(125, 25, 125,0.1), 2px 2px 1px rgba(125, 25, 125,0.3), -1px -1px 2px rgba(125, 25, 125,0.1), -2px -2px 1px rgba(125, 25, 125,0.2);
display: block;
height: 50px;
overflow: hidden;
text-indent: -9999px;
width: 52px;
cursor: pointer;
float: left;
/*==动态变化效果==*/
-webkit-transition: all 0.5s ease .03s;
-moz-transition: all 0.5s ease .03s;
-o-transition: all 0.5s ease .03s;
transition: all 0.5s ease .03s;
}
/*＝＝悬停效果＝＝*/
#topBottomBar div:hover {
-moz-transform: rotate(-10deg) scale(1.1) translateX(-3px);
-webkit-transform: rotate(-10deg) scale(1.1) translateX(-3px);
-o-transform: rotate(-10deg) scale(1.1) translateX(-3px);
transform: rotate(-10deg) scale(1.1) translateX(-3px);
}
/*==向下button效果==*/
#topBottomBar .goToBottom {
-moz-transform: rotate(92deg);
-o-transform: rotate(92deg);
-webkit-transform: rotate(92deg);
transform: rotate(92deg);
margin-left: 5px;
background-image: url("images/gotobottom.png");
}
/*==向下button的悬停效果==*/
#topBottomBar .goToBottom:hover {
-moz-transform: rotate(100deg) scale(1.1) translateY(-3px);
-webkit-transform: rotate(100deg) scale(1.1) translateX(3px);
-o-transform: rotate(100deg) scale(1.1) translateX(3px);
transform: rotate(100deg) scale(1.1) translateX(3px);
}
/*==容器样式==*/
#wrapper {
width: 960px;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
这样button效果就出来了，大家千万别小看这两个button的样式哟，可以说，他使用了一些常用的css3属性方法，我点了一下，总共使用了css3的五种属性。比如：border-color写的多颜色边框效果、boder-radius制作的不规则圆角效果、box-shadow写的阴影效果、transition做的动画效果、transform做的旋转，移位之类特效。要是您还没有接触的话，可以去看看，很有意思的。
special scroll events插件
下面是一个关键之处，这是一个special scroll events插件，因为我们后面制作效果需要这个插件，具体代码是什么意思，我也不太懂，我是从James Padolsey复制过来的。大家一起看看吧，希望有朋友能解说一下其意思：
<script type="text/javascript">
(function(){
var special = jQuery.event.special,
uid1 = 'D' + (+new Date()),
uid2 = 'D' + (+new Date() + 1);
special.scrollstart = {
setup: function(){
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if(timer) {
clearTimeout(timer);
} else {
evt.type = 'scrollstart';
jQuery.event.handle.apply(_self,_args);
}
timer = setTimeout(function(){
timer = null;
},special.scrollstop.latency);
};
jQuery(this).bind('scroll',handler).data(uid1,handler);
},
teardown: function(){
jQuery(this).unbind('scroll',jQuery(this).data(uid1));
}
};
special.scrollstop = {
latency: 300,
setup: function(){
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function(){
timer = null;
evt.type = 'scrollstop';
jQuery.event.handle.apply(_self,_args);
},special.scrollstop.latency);
};
jQuery(this).bind('scroll',handler).data(uid2,handler);
},
teardown: function() {
jQuery(this).unbind('scroll',jQuery(this).data(uid2));
}
};
})();
</script>
jQuery Code
有了插件，我们实现效果就好办多了，别的不多说，大家看代码吧，因为我自己也不是很懂jQuery，就不浪费大家时间了：
<script type="text/javascript">
$(function(){
//the element inside of which we want to scroll
var contentWrap = $("#wrapper");
var btns = $("#topBottomBar div");
//show the buttons
btns.fadeIn("slow");
//whenever we scroll fade out both buttons
$(window).bind("scrollstart",function(){
btns.stop().animate({"opacity":"0.2"});
});
//...and whenever we stop scrolling fade in both buttons
$(window).bind("scrollstop",function(){
btns.stop().animate({"opacity":"1"});
});
//clicking the "goToBottom" button will make the page scroll to the contentWrap's height
$("#goToBottom").click(function(e){
$("html,body").animate({scrollTop:contentWrap.height()},800);
});
//clicking the "goToTop" button will make the page scroll to the top of the page
$("#goToTop").click(function(e){
$("html,body").animate({scrollTop:"0px"},800);
});
});
</script>
当然大家记得要把jQuery的版本库加载进来，不然是没有效果的哟。
到此时，效果就出来了，大家一起来看看吧：
希望上面的效果对大家有所帮助，如果你还不太清楚，你也可以点击Scrolling to the Top and Bottom with jQuery和special scroll events。如果你有更好的效果，可以与我们一起分享受。
