带滑动效果效果的“回顶部”
<html >
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"? />
<title>CSS中国 - CSS教程 - CSS视频教程</title>
<style>
#sl{
background: url("backtop.gif") -101px -118px;
height: 63px;
width: 19px;
right: 50px;
position: absolute;
display: none;
}
#sl a{
display: block;
height: 63px;
width: 19px;
}
</style>
<script type="text/javascript">
?<!--
??var $ = function(o){return document.getElementById(o);}
??window.onload = function(){
???window.onscroll = function(){
????var scrollTop = document.documentElement.scrollTop;
????if(scrollTop){
?????$("sl").style.display = 'block';
?????$("sl").style.top = (scrollTop + document.documentElement.clientHeight - 80) + "px";
????}else{
?????$("sl").style.display = 'none';
????}
???}
??}
?//-->
?</script>
</head>
<body>
CSS中国[www.csschina.net],提供DIV+CSS海量教程,搜罗各类DIV+CSS相关教程、视频教程,最新的Web2.0标准资讯,DIV+CSS布局入门教程,CSS布局实例,CSS样式.教程适合初学者循序渐进的学习!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />CSS中国[www.csschina.net],提供DIV+CSS海量教程,搜罗各类DIV+CSS相关教程、视频教程,最新的Web2.0标准资讯,DIV+CSS布局入门教程,CSS布局实例,CSS样式.教程适合初学者循序渐进的学习!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />CSS中国[www.csschina.net],提供DIV+CSS海量教程,搜罗各类DIV+CSS相关教程、视频教程,最新的Web2.0标准资讯,DIV+CSS布局入门教程,CSS布局实例,CSS样式.教程适合初学者循序渐进的学习!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="sl">
<a href="javascript:void(0)" onclick="goto_top()"></a>
</div>
</body>
<script type="text/javascript">
??var goto_top_type = -1;
?var goto_top_itv = 0;
?
?function goto_top_timer()
?{
?var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
?var moveby = 15;
?
?y -= Math.ceil(y * moveby / 100);
?if (y < 0) {
?y = 0;
?}
?
?if (goto_top_type == 1) {
?document.documentElement.scrollTop = y;
?}
?else {
?document.body.scrollTop = y;
?}
?
?if (y == 0) {
?clearInterval(goto_top_itv);
?goto_top_itv = 0;
?}
?}
?
?function goto_top()
?{
?if (goto_top_itv == 0) {
?if (document.documentElement && document.documentElement.scrollTop) {
?goto_top_type = 1;
?}
?else if (document.body && document.body.scrollTop) {
?goto_top_type = 2;
?}
?else {
?goto_top_type = 0;
?}
?
?if (goto_top_type > 0) {
?goto_top_itv = setInterval('goto_top_timer()', 10);
?}
?}
}
</script>
</html>
