javascript中返回顶部按钮的实现_javascript技巧
程序员文章站
2022-05-21 17:33:41
...
炫酷的返回顶部功能
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
返回顶部按钮的实现 请往下滑
以上所述就是本文的全部内容了,希望大家能够喜欢。