动态按需加载返回顶部，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;
}
html代码
<!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
时间： 2024-11-04 19:54:47