最近在复习前端的知识,无聊写了个返回顶部按钮。已兼容所有浏览器。
PS:不要在意我用的是H5的规范写的页面,JS代码才是核心
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { height: 2000px; } #topbtn { position: absolute; right: 5%; } </style> </head> <body> <script type="text/javascript"> window.onload = function() { var t = document.createElement('div'); t.setAttribute('id','topbtn'); t.innerText = 'Top'; t.style.top = document.documentElement.clientHeight - 80 + 'px'; t.style.cursor = 'pointer'; document.body.appendChild(t); if(window.attachEvent) { t.attachEvent('onclick',function() { window.scrollTo(0,0); }); window.attachEvent('onscroll',function() { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; t.style.top = scrollTop + document.documentElement.clientHeight -80 + 'px'; }); } else { t.addEventListener('click',function() { window.scrollTo(0,0); }); window.addEventListener('scroll',function() { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; t.style.top = scrollTop + document.documentElement.clientHeight -80 + 'px'; }); } } </script> </body> </html>