经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
前端 css+js实现返回顶部功能
来源:cnblogs  作者:AnneHan  时间:2018/9/27 16:42:44  对本文有异议

描述:

       本文主要是讲,通过css+js实现网页中的【返回顶部】功能。

 

实现代码:

HTML:

  1. 1 <div>
  2. 2 <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
  3. 3 </div>

 

CSS:

  1. 1 /* return top */
  2. 2 #btnTop {
  3. 3 display: none;
  4. 4 position: fixed;
  5. 5 bottom: 20px;
  6. 6 right: 30px;
  7. 7 z-index: 99;
  8. 8 border: none;
  9. 9 outline: none;
  10. 10 background-color: #89cff0;
  11. 11 color: white;
  12. 12 cursor: pointer;
  13. 13 padding: 15px;
  14. 14 border-radius: 10px;
  15. 15 }
  16. 16 #btnTop:hover {
  17. 17 background-color: #1E90FF;
  18. 18 }

 

JS:

  1. 1 // 当网页向下滑动 20px 出现"返回顶部" 按钮
  2. 2 window.onscroll = function() {
  3. 3 scrollFunction()
  4. 4 };
  5. 5
  6. 6 function scrollFunction() {
  7. 7 console.log(121);
  8. 8 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  9. 9 document.getElementById("btnTop").style.display = "block";
  10. 10 } else {
  11. 11 document.getElementById("btnTop").style.display = "none";
  12. 12 }
  13. 13 }
  14. 14
  15. 15 // 点击按钮,返回顶部
  16. 16 function returnTop() {
  17. 17 document.body.scrollTop = 0;
  18. 18 document.documentElement.scrollTop = 0;
  19. 19 }

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号