标签：返回顶部 style class blog code java
动态按需加载返回顶部，css侧边屏幕绝对定位，结合简单jQuery动画实现更好体验
/*默认样式，主要是position:fixed实现屏幕绝对定位,ie6不支持position:fixed效果*/ #gotoTop{/*返回顶部按钮的位置与样式*/ display:none; position:fixed; text-align:center;/*实现按钮内部字体的水平居中 */ top:75%;/*定位向上的位置*/ left:50%;/* 相对于水平向右移50% */ cursor:pointer; margin-top:-50px;/*在向下75%的基础上向上50px */ margin-left:520px;/*在右移50%的基础上再像右移520px */ /* 按钮样式*/ padding:9px 4px; width:20px; border:1px solid #e0e0e0; background:#fff; } /*用CSS表达式(expression)来实现ie6下position:fixed效果*/ #gotoTop{ _position:absolute; _top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px") } /*鼠标进入的反馈效果*/ #gotoTop.hover{ background:#5CB542; color:#fff; text-decoration:none; }
<!DOCTYPE HTML > <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> </head> <body style="height:1500px;"> <style type="text/css"> /*默认样式，主要是position:fixed实现屏幕绝对定位,ie6不支持position:fixed效果*/ #gotoTop{/*返回顶部按钮的位置与样式*/ display:none; position:fixed; text-align:center;/*实现按钮内部字体的水平居中 */ top:75%;/*定位向上的位置*/ left:50%;/* 相对于水平向右移50% */ cursor:pointer; margin-top:-50px;/*在向下75%的基础上向上50px */ margin-left:520px;/*在右移50%的基础上再像右移520px */ /* 按钮样式*/ padding:9px 4px; width:20px; border:1px solid #e0e0e0; background:#fff; } /*用CSS表达式(expression)来实现ie6下position:fixed效果*/ #gotoTop{ _position:absolute; _top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px") } /*鼠标进入的反馈效果*/ #gotoTop.hover{ background:#5CB542; color:#fff; text-decoration:none; } </style> <script type="text/javascript"> $(document).ready(function() { function gotoTop(min_height){ //min_height:确定长度为多少的时候出现返回顶部按钮， //获取页面的最小高度，无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处理函数 $(window).scroll(function(){ //获取窗口的滚动条的垂直位置 var s = $(window).scrollTop(); //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐 if( s > min_height){ $("#gotoTop").fadeIn(100);//按钮动画出现 }else{ $("#gotoTop").fadeOut(200);//按钮动画消失 }; }); }; gotoTop(100);/*疑问？为什么gotoTop函数只执行一次，而他内部的scroll函数会一直执行*/ $("#gotoTop").click(//定义返回顶部点击向上滚动的动画 function(){$(‘html,body‘).animate({scrollTop:0},700); }).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现 function(){$(this).addClass("hover");}, function(){$(this).removeClass("hover"); }); }); </script> <div id="page" >测试回到顶部方法</div> <div id="gotoTop">返回顶部</div> </body> </html>
jQuery(document).ready(function($){ $(‘#shang‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);}); $(‘#comt‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#comments‘).offset().top}, 800);}); $(‘#xia‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#footer‘).offset().top}, 800);}); });
jQuery(document).ready(function($){ $(‘#shang‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);}); $(‘#comt‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#comments‘).offset().top}, 800);}); $(‘#xia‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#footer‘).offset().top}, 800);}); }); 是点击定位的意思 点击ID为shang的元素，回到顶部 点击ID为comt的元素，回到ID为comments的位置，就是评论的位置 点击ID为xia的元素，回到底部
animate是jq的一个特效的函数方法
定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
$(‘#shang‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);});
的意思就是滚动条跳到0的位置，页面移动速度是800
标签：返回顶部 style class blog code java
原文地址：http://www.cnblogs.com/qiangmin/p/3796242.html
