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 事件一章节。

回复

我来回复
  • 暂无回复内容