<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>js+css实现置顶的效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } #top_div{ position:fixed; bottom:190px; right:0; display:none; z-index: 5; width: 86px; height: 20px; } </style> </head> <body> <div name="top" style=" 100%;height: 1000px;background: papayawhip"></div> <div id="top_div"><a href="#top"><img src="go-top.png" alt=""/></a></div> </body> </html> <script type="text/javascript"> /*最低兼容到ie7*/ window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); if( t >= 300 ) { top_div.style.display = "none"; } if( t <= 0 ) { top_div.style.display = "none"; } else { top_div.style.display = "block"; } } </script>
效果图：
