前端 css+js实现返回顶部功能
描述:
本文主要是讲,通过css+js实现网页中的【返回顶部】功能。
实现代码:
HTML:
1 <div> 2 <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button> 3 </div>
CSS:
1 /* return top */ 2 #btnTop { 3 display: none; 4 position: fixed; 5 bottom: 20px; 6 right: 30px; 7 z-index: 99; 8 border: none; 9 outline: none; 10 background-color: #89cff0; 11 color: white; 12 cursor: pointer; 13 padding: 15px; 14 border-radius: 10px; 15 } 16 #btnTop:hover { 17 background-color: #1E90FF; 18 }
JS:
1 // 当网页向下滑动 20px 出现"返回顶部" 按钮 2 window.onscroll = function() { 3 scrollFunction() 4 }; 5 6 function scrollFunction() { 7 console.log(121); 8 if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 9 document.getElementById("btnTop").style.display = "block"; 10 } else { 11 document.getElementById("btnTop").style.display = "none"; 12 } 13 } 14 15 // 点击按钮,返回顶部 16 function returnTop() { 17 document.body.scrollTop = 0; 18 document.documentElement.scrollTop = 0; 19 }
作者:Anne Han
出处:https://www.cnblogs.com/AnneHan
GitHub:https://github.com/AnneHan
如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]
如果您对本文有意见或者建议,欢迎留言
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步