首先，“回到顶部”、“用户反馈”这两个按钮是通过定位放在左下角上。
（1）“回到顶部”的按钮只有当滚动条有出现下滑时才出现
（2）“用户反馈”按钮，用户刚打开时会抖动一下，引起用户的注意，然后才定住。
我的实现做法
首先，这两个按钮我都使用定位的方式定位在右下角适合的位置上。然后，
一、"回到顶部"
1、因为如果我们没有滚动鼠标，“按钮”没有出现，所以，我首先是把按钮隐藏起来的display：none，然后再通过js计算滚动后的高度
滚动后高度计算：scrollt = document.,documentElement.scrollTop+document.body.scrollTop
可视区高度：winH=$(window).height()
2、然后这两个高度做比较，如果是大于，说明已经滚动了，“回到顶部”的按钮可以显示出来display:block
3、注意：
（1）主要窗口滚动，就触发代码$(window).scroll(fucntion(){})
(2)兼容IE和chrome浏览器
document.documentElement.scrollTop+document.body.scrollTop
chrome(这个body获取的IE/FF得到的值为0)
代码：
//首页回到顶部和反馈入口
$(function(){
$(window).scroll(function(){ //只要窗口滚动,就触发下面代码
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度 document.body.scrollTop用来兼容chrome//console.log('滚动条的高度scrollTop1-'+scrollTop1+'-scrollTop2-'+scrollTop2);
var winH = $(window).height(); // 获取可视区高度
console.log('滚动后高度为'+'---'+scrollt);
if( scrollt+winH >winH ){ //判断滚动后高度超过0px,就显示
$("#gotop").fadeIn(400); //淡出
}else{
$("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
}
});
$("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$("html,body").animate({scrollTop:"0px"},200);
});
});
二、“用户反馈”抖动
1、这个抖动的动画效果是使用css3动画做的、
代码如下：
/* feedback的弹跳效果 */
.css3-notification {
-webkit-animation: bounce 1800ms ease-out;
-moz-animation: bounce 1800ms ease-out;
-o-animation: bounce 1800ms ease-out;
animation: bounce 1800ms ease-out;
} /* Webkit, Chrome and Safari */ @-webkit-keyframes bounce {
0% {
-webkit-transform:translateY(-100%);
opacity:;
}
5% {
-webkit-transform:translateY(-100%);
opacity:;
}
15% {
-webkit-transform:translateY(0);
padding-bottom: 5px;
}
30% {
-webkit-transform:translateY(-50%);
}
40% {
-webkit-transform:translateY(0%);
padding-bottom: 6px;
}
50% {
-webkit-transform:translateY(-30%);
}
70% {
-webkit-transform:translateY(0%);
padding-bottom: 7px;
}
80% {
-webkit-transform:translateY(-15%);
}
90% {
-webkit-transform:translateY(0%);
padding-bottom: 8px;
}
95% {
-webkit-transform:translateY(-10%);
}
97% {
-webkit-transform:translateY(0%);
padding-bottom: 9px;
}
99% {
-webkit-transform:translateY(-5%);
}
100% {
-webkit-transform:translateY(0);
padding-bottom: 9px;
opacity:;
}
} /* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
0% {
-moz-transform:translateY(-100%);
opacity:;
}
5% {
-moz-transform:translateY(-100%);
opacity:;
}
15% {
-moz-transform:translateY(0);
padding-bottom: 5px;
}
30% {
-moz-transform:translateY(-50%);
}
40% {
-moz-transform:translateY(0%);
padding-bottom: 6px;
}
50% {
-moz-transform:translateY(-30%);
}
70% {
-moz-transform:translateY(0%);
padding-bottom: 7px;
}
80% {
-moz-transform:translateY(-15%);
}
90% {
-moz-transform:translateY(0%);
padding-bottom: 8px;
}
95% {
-moz-transform:translateY(-10%);
}
97% {
-moz-transform:translateY(0%);
padding-bottom: 9px;
}
99% {
-moz-transform:translateY(-5%);
}
100% {
-moz-transform:translateY(0);
padding-bottom: 9px;
opacity:;
}
} /* Opera 12.0 */
@-o-keyframes bounce {
0% {
-o-transform:translateY(-100%);
opacity:;
}
5% {
-o-transform:translateY(-100%);
opacity:;
}
15% {
-o-transform:translateY(0);
padding-bottom: 5px;
}
30% {
-o-transform:translateY(-50%);
}
40% {
-o-transform:translateY(0%);
padding-bottom: 6px;
}
50% {
-o-transform:translateY(-30%);
}
70% {
-o-transform:translateY(0%);
padding-bottom: 7px;
}
80% {
-o-transform:translateY(-15%);
}
90% {
-o-transform:translateY(0%);
padding-bottom: 8px;
}
95% {
-o-transform:translateY(-10%);
}
97% {
-o-transform:translateY(0%);
padding-bottom: 9px;
}
99% {
-o-transform:translateY(-5%);
}
100% {
-o-transform:translateY(0);
padding-bottom: 9px;
opacity:;
}
} /* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
0% {
transform:translateY(-100%);
opacity:;
}
5% {
transform:translateY(-100%);
opacity:;
}
15% {
transform:translateY(0);
padding-bottom: 5px;
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
padding-bottom: 6px;
}
50% {
transform:translateY(-30%);
}
70% {
transform:translateY(0%);
padding-bottom: 7px;
}
80% {
transform:translateY(-15%);
}
90% {
transform:translateY(0%);
padding-bottom: 8px;
}
95% {
transform:translateY(-7%);
}
97% {
transform:translateY(0%);
padding-bottom: 9px;
}
99% {
transform:translateY(-3%);
}
100% {
transform:translateY(0);
padding-bottom: 9px;
opacity:;
}
}
2、注意：
IE9+才支持
详细见表
查看效果：http://www.ingdan.com/