<!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="width: 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>
效果图：