201212 月11
JS源码：网页滚动右下角出现返回顶部goTop
效果如图：
直接贴代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> Wizzer.cn </TITLE>
<style type="text/css" media="screen">
#goTop {position:fixed;right:20px;bottom:20px;width:40px;height:32px;padding:8px 0 0;background-color:#69c;border-radius:6px;cursor:pointer;}
#goTop:hover {background-color:#369;}
#goTop:hover .gotop1 {border-left:12px solid #369;border-right:12px solid #369;}
#goTop .gotop1 {width:0;margin:0 auto;border-bottom:12px solid #FFF;border-left:12px solid #69c;border-right:12px solid #69c;}
#goTop .gotop2 {width:10px;height:10px;margin:0 auto;background-color:#FFF;}
</style>
</HEAD>
<BODY>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
<div title="返回顶部" id="goTop" style="display:none;">
<div class="gotop1"></div>
<div class="gotop2"></div>
</div>
<script type="text/javascript">
function $getId(Id) {
return document.getElementById(Id);
}
var goTop = $getId("goTop");
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 350) {
goTop.style.display = "";
} else {
goTop.style.display = "none";
}
}
goTop.onclick = function () {
var Timer = setInterval(GoTop, 10);
function GoTop() {
if (document.documentElement.scrollTop + document.body.scrollTop < 1) {
clearInterval(Timer);
} else {
document.documentElement.scrollTop /= 1.1;
document.body.scrollTop /= 1.1;
}
}
}
</script>
</BODY>
</HTML>