Javascript返回顶部代码实现

时间：2022-04-23 13:42:23

 

返回顶部逻辑很简单，功能点分为：

  • 页面第一屏内不展示返回顶部的图标，超过第一屏时展示图标；
  • 点击返回顶部图标时页面流畅地返回顶部。

HTML文件部分：

Html代码   Javascript返回顶部代码实现
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>返回顶部</title>  
  5.         <link rel="stylesheet" type="text/css" href="css/style.css"/>  
  6.     </head>  
  7.     <body>  
  8.         <p>向下拖动滚动条（进入第二屏），右下角会出现“返回顶部”图标</p>  
  9.         <img src="images/totop.png" id="toTop"/>  
  10.         <script style="text/javascript" src="js/lee_top.js"></script>  
  11.     </body>  
  12. </html>  

 

CSS文件部分：

Css代码   Javascript返回顶部代码实现
  1. body{  
  2.     height:4000px;  
  3. }  
  4. #toTop{  
  5.     position:fixed;  
  6.     right:30px;  
  7.     bottom:40px;  
  8.     cursor:pointer;  
  9.     display:none;  
  10. }  

 

PS：因为CSS部分用到了"fixed"，这个例子没有做IE6的兼容性处理（我相信大多数前端工程师都不喜欢IE6,），不过如果需要探讨此例的IE6兼容性,可以私信探讨^_^ 或者查看最新代码地址：https://github.com/tjuking/lee-goToTop

 

JS文件部分：

Js代码   Javascript返回顶部代码实现
  1. (function(){  
  2.     var scrollEle = clientEle = document.documentElement,  
  3.         toTopBtn = document.getElementById("toTop"),  
  4.         compatMode = document.compatMode,  
  5.         isChrome = window.navigator.userAgent.indexOf("Chrome") === -1 ? false : true;  
  6.     //不同渲染模式以及Chrome的预处理  
  7.     if(compatMode === "BackCompat" || isChrome){  
  8.         scrollEle = document.body;  
  9.     }  
  10.     if(compatMode === "BackCompat"){  
  11.         clientEle = document.body;  
  12.     }  
  13.     //返回顶部按钮的点击响应（注册函数），时间间隔和高度缩减率可以调节  
  14.     toTopBtn.onclick = function(){  
  15.         var moveInterval = setInterval(moveScroll, 10);  
  16.         function moveScroll(){  
  17.             setScrollTop(getScrollTop() / 1.2);  
  18.             if(getScrollTop() === 0){  
  19.                 clearInterval(moveInterval);  
  20.             }  
  21.         }  
  22.     }  
  23.     //滚动时判断是否显示返回顶部按钮（注册函数）  
  24.     window.onscroll = function(){  
  25.         var display = toTopBtn.style.display;  
  26.         if(getScrollTop() > getClientHeight()){  
  27.             if(display === "none" || display === ""){  
  28.                 toTopBtn.style.display = "block";  
  29.             }  
  30.         }else{  
  31.             if(display === "block" || display === ""){  
  32.                 toTopBtn.style.display = "none";  
  33.             }  
  34.         }  
  35.     }  
  36.     //获取和设置scrollTop  
  37.     function getScrollTop(){  
  38.         return scrollEle.scrollTop;  
  39.     }  
  40.     function setScrollTop(value){  
  41.         scrollEle.scrollTop = value;  
  42.     }  
  43.     //获取当前网页的展示高度（第一屏高度），此处Chrome正常  
  44.     function getClientHeight(){  
  45.         return clientEle.clientHeight;  
  46.     }  
  47. })();  

 

如果返回顶部用jQuery实现需要考虑的东西就很少了，不过原生的Javascript能帮助我们更好的学习这门语言以及了解各浏览器的不同。

 

当然除了以上代码还需要去网上找一个漂亮的图标。

 

 

 转自：http://tjuking.iteye.com/blog/1743229

标签：

相关文章