纯JS实现点击按钮返回页面顶部的代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了纯JS实现点击按钮返回页面顶部的代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1892字，纯文字阅读大概需要3分钟。

内容图文

实现点击按钮返回页面顶部的效果需要用到很多JavaScript知识，比如：function()，document.getElementById()，if函数等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程。

实例描述：用户往下滑动页面，当滚动条距离顶部的距离大于20px时，出现“返回顶部”的按钮，点击按钮可以直接返回顶部，按钮消失，具体代码如下：

HTML部分：

<button onclick="topFunction()" id="myBtn" title="回顶部">JS返回顶部</button>
<div style="background-color:pink;color:white;padding:80px">向下滑动</div>
<div style="background-color:lightgrey;padding:80px 30px 2500px">页面内容，此处省略一万字</div>

CSS部分：

*{padding: 0;margin: 0;}
   #myBtn {
     display: none;
     position: fixed;
     bottom: 20px;
     right: 30px;
     z-index: 99;
     border: none;
     outline: none;
     background-color: skyblue;
     color: white;
     cursor: pointer;
     padding: 15px;
     border-radius: 10px;
   }
   
   #myBtn:hover {
     background-color: plum;
   }

JavaScript部分：

// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
  function scrollFunction() {console.log(121);
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("myBtn").style.display = "block";
      } else {
          document.getElementById("myBtn").style.display = "none";
      }
  }
   
  // 点击按钮，返回顶部
  function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
  }

效果如图所示：

以上给大家分享了如何用原生JavaScript实现点击按钮返回页面顶部的代码，代码简洁，步骤详细，初学者可以自己动手尝试，看看你的代码能不能实现返回页面顶部的效果，希望这篇文章对你有所帮助！

更多相关教程请访问 JavaScript中文参考手册

以上就是纯JS实现点击按钮返回页面顶部的代码的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的纯JS实现点击按钮返回页面顶部的代码全部内容，希望文章能够帮你解决纯JS实现点击按钮返回页面顶部的代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端