实现返回顶部（Back to top）的JavaScript

内容摘要

我们在很多网站比如新浪微博的右下角都能看到“返回顶部”的功能，那么它是如何实现的呢？

文章正文

我们在很多网站比如新浪微博的右下角都能看到“返回顶部”的功能，那么它是如何实现的呢？

功能：

1、点击“返回顶部”（Back to top）链接跳转到页面的顶部（一屏）

2、在较短的页面中不显示，而在多屏的长页面会自动显示出来

3、支持IE8及其以上浏览器，Chrome和Safari等就更不必说了

4、不支持IE6（早该淘汰了）

这里介绍的是开源的lee-goToTop

使用方法：

demo.html

<!DOCTYPE html>
<html>
<head>
 <title>返回顶部-Demo</title>
 <link rel="stylesheet" type="text/css" href="css/to-top.css"/>
</head>
<body>
 向下拖动滚动条（进入第二屏），右下角会出现“返回顶部”图标
 Item 1
 Item 2
 Item 3
 Item 4
 Item 5
 Item 6
 Item 7
 Item 8
 中间部分自己加
 Item 96
 Item 97
 Item 98
 Item 99
 Item 100

 <img src="images/to-top.png" id="toTop"/>
 <script style="text/javascript" src="js/to-top.js"></script>
</body>
</html>

to-top.css

* html, * html body{
background-image:url(about:blank);
background-attachment:fixed;
}
#toTop{
position:fixed;
_position:absolute;
right:30px;
bottom:40px;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-40);
cursor:pointer;
display:none;
}

to-top.js

/*!
author: 李进
email: tjuking@gmail.com
blog: tjuking.iteye.com
time: 2012-12-06
*/
(function(win, doc){
//变量
var compatMode = doc.compatMode,
  isChrome = win.navigator.userAgent.indexOf("Chrome") === -1 ? false : true,
  scrollEle = compatMode === "BackCompat" || isChrome ? doc.body : doc.documentElement,
  clientEle = compatMode === "BackCompat" ? doc.body : doc.documentElement,
  toTopImg = doc.getElementById("toTop"),
  rate = 0.6,
  timeGap = 10;
//返回顶部图标的点击响应
toTopImg.onclick = function(){
  var moveInterval = setInterval(moveScroll, timeGap);
  function moveScroll(){
   var scrollTop = scrollEle.scrollTop;
   if(scrollTop === 0){
    clearInterval(moveInterval);
    return ;
   }
   scrollEle.scrollTop = scrollTop * rate;
  }
};
//滚动时判断是否显示返回顶部图标
win.onscroll = function(){
  var display = toTopImg.style.display;
  if(scrollEle.scrollTop > clientEle.clientHeight){
   if(display !== "block"){
    toTopImg.style.display = "block";
   }
  }else{
   if(display !== "none"){
    toTopImg.style.display = "none";
   }
  }
};
})(window, document);

可以在js文件中修改弹性值rate、timeGap以满足定制化需求，例如：

rate = 0.8; //默认 rate = 0.6

注：这种方法采用的是原生javascript实现的

代码注释

上一篇 jQuery实现“返回顶部”的功能（支持IE6）下一篇 json_encode中文乱码解决方法

作者：喵哥笔记

学的不仅是技术，更是梦想！