实现返回顶部(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>
  <p>向下拖动滚动条(进入第二屏),右下角会出现“返回顶部”图标</p>
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
  <p>Item 6</p>
  <p>Item 7</p>
  <p>Item 8</p>
  <p>中间部分自己加</p>
  <p>Item 96</p>
  <p>Item 97</p>
  <p>Item 98</p>
  <p>Item 99</p>
  <p>Item 100</p>
  
  <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实现的

 

代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!