javascript中返回顶部按钮的实现
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript中返回顶部按钮的实现,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3023字,纯文字阅读大概需要5分钟。
内容图文
炫酷的返回顶部功能
js核心代码
window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.style.display = "none"; } } var ptt=20; function pageScroll() { document.getElementById('flypig').style.display='block'; window.scrollBy(0,-10); //每次上升10px if(document.body.scrollTop==0) { document.getElementById('flypig').style.marginBottom=ptt+'px'; ptt=ptt+10; } scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次 if(ptt>=1000){ ptt=0; document.getElementById('flypig').style.marginBottom=20+'px'; document.getElementById('flypig').style.display='none'; clearTimeout(scrolldelay); } //pageScroll ends }
html
<!DOCTYPE html> <html> <head> <title>返回顶部按钮的实现</title> <meta charset="utf-8" /> <style> body{ margin:0px; } #flypig{ display: none; float: left; position: fixed; bottom: 20px; margin-left: 75%; cursor: pointer; margin-bottom: 20px; } #go{ display: block; float: left; position: fixed; bottom: 10px; margin-left: 75%; cursor: pointer; } </style> <script> window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "go" ); if( t >= 300 ) { top_div.style.display = "block"; } else { top_div.style.display = "none"; } } var ptt=20; function pageScroll() { document.getElementById('flypig').style.display='block'; window.scrollBy(0,-10); //每次上升10px if(document.body.scrollTop==0) { document.getElementById('flypig').style.marginBottom=ptt+'px'; ptt=ptt+10; } scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次 if(ptt>=1000){ ptt=0; document.getElementById('flypig').style.marginBottom=20+'px'; document.getElementById('flypig').style.display='none'; clearTimeout(scrolldelay); } //pageScroll ends } </script> </head> <body> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1 style="text-align:center;">请往下滑</h1> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /><!--让你的页面足够的长--> <div style="display: none; float: left; position: fixed; margin-left: 50%; cursor: pointer; margin-bottom: 20px;" id="flypig"> <img src="/wp-content/themes/Jakesoft/images/flypig.gif"> </div> <div style="display: none; float: left; position: fixed; bottom: 10px; margin-left: 50%; cursor: pointer;" id="go" onclick="pageScroll()">返回顶部</div></html>
以上所述就是本文的全部内容了,希望大家能够喜欢。
内容总结
以上是互联网集市为您收集整理的javascript中返回顶部按钮的实现全部内容,希望文章能够帮你解决javascript中返回顶部按钮的实现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。