js点击返回网页顶部代码实例详解
本章节分享一段代码实例，它实现了点击返回网页顶部的功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body{
margin:0;
padding:0;
height:1500px;
width:2000px;
}
#to_top{
width:30px;
height:40px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
</style>
<script>
window.onload = function(){
var oTop = document.getElementById("to_top");
var screenw = document.documentElement.clientWidth || document.body.clientWidth;
var screenh = document.documentElement.clientHeight || document.body.clientHeight;
oTop.style.left = screenw - oTop.offsetWidth +"px";
oTop.style.top = screenh - oTop.offsetHeight + "px";
window.onscroll = function(){
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
oTop.style.left = screenw - oTop.offsetHeight + scrollleft +"px";
}
oTop.onclick = function(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}
}
</script>
</head>
<body>
<div id="to_top">返回顶部</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var oTop = document.getElementById("to_top")，获取id属性值为to_top的元素对象。
（3）.var screenw = document.documentElement.clientWidth || document.body.clientWidth，获取浏览器客户区的宽度，这里采用的是兼容性写法，在相关阅读会有相关文章介绍。
（4）.var screenh = document.documentElement.clientHeight || document.body.clientHeight，获取浏览器客户区的高度，这里采用的是兼容性写法，在相关阅读会有相关文章介绍。
（5）.oTop.style.left = screenw - oTop.offsetWidth +"px"，设置left属性值为客户区的宽度减去元素本身的宽度。（6）.oTop.style.top = screenh - oTop.offsetHeight + "px"，设置top属性值为客户区的高度减去元素本身的高度。
（7）.window.onscroll = function(){}，为window对象注册onscroll事件处理函数。
（8）.var scrolltop = document.documentElement.scrollTop || document.body.scrollTop，获取网页向上滚动的尺寸。
（9）.var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;，获取网页向左滚动的尺寸。
（10）.oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px"，将元素固定于网页的底部。
（11）.oTop.style.left = screenw - oTop.offsetHeight + scrollleft +"px"，将元素固定于网页的右侧。
（12）.oTop.onclick = function(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}，点击按钮可以返回网页的顶部。
二.相关阅读:
（1）.offsetWidth可以参阅js offsetWidth一章节。
（2）.scrollTop可以参阅scrollTop一章节。
（3）.onscroll事件可以参阅javascript scroll 事件一章节。