$(document).ready(function(){
//alert($("#goTopBtn").css("top"))
if($("#goTopBtn").css("top")=="180px"){
$("#goTopBtn").hide()
}
$(window).scroll(function(){//滚动时触发函数
if($("#goTopBtn").css("top")=="180px"){
//alert(111)
$("#goTopBtn").hide()
}else{
$("#goTopBtn").show()
}
$("#goTopBtn").css("top",$(document).scrollTop()+180)//将滚动条高度赋给悬浮框,如果你想改变位置，在300加值，自己修改吧。
})
})
</script>
<script>
function button1(){
button2(button3)
}
function button2(callback){
window.scrollTo(0,0)
callback()
}
function button3(){
$("#goTopBtn").hide()
// alert(22)
}
</script>
<style>
#goTopBtn {
POSITION: fixedTEXT-ALIGN: centermargin-right:50pxLINE-HEIGHT: 30pxWIDTH: 30pxbottom:90pxHEIGHT: 20pxFONT-SIZE: 12pxCURSOR: pointerRIGHT: 0px_position: absolute_right: auto
}
</style>
</head>
<body>
<div style="position: absolutez-index:90top:180px" id="goTopBtn" onclick="button1()"><img border=0 src="Top.gif"></div>
内容<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/>内容<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/>
</body>
</html>
好事好了，就是那个点击两次置顶才可以隐藏
重点是go-top的CSS定义：div.go-top {display: none
opacity: 0.6
z-index: 999999
position: fixed
bottom: 113px
left: 90%
margin-left: 40px
border: 1px solid #a38a54
width: 38px
height: 38px
background-color: #eddec2
border-radius: 3px
cursor: pointer}div.go-top:hover {opacity: 1
filter: alpha(opacity=100)}div.go-top div.arrow {position: absolute
left: 10px
top: -1px
width: 0
height: 0
border: 9px solid transparent
border-bottom-color: #cc3333}div.go-top div.stick {position: absolute
left: 15px
top: 15px
width: 8px
height: 14px
display: block
background-color: #cc3333
-webkit-border-radius: 1px
-moz-border-radius: 1px
border-radius: 1px}
使用fixed定位，让按钮始终出现在右下角，通过设定left:90%可以使按钮在右方出现，但又不会太紧贴滚动条。
按钮默认不可见，当滚动页面到一定高度后，按钮出现，这里用jQuery实现
$(function() {$(window).scroll(function() {if ($(window).scrollTop() >1000)$('div.go-top').show() else
$('div.go-top').hide()
}) $('div.go-top').click(function() {$('html, body').animate({scrollTop: 0}, 1000)
})
})
当按下按钮时，有动画效果返回顶部
我觉得，如果css定义如果能抽象分层，或许可以解决这个问题。任何问题（不限于css）的从上往下分解的话，上层都是面向语义，底层都是面向原子的属性或操作的。如果无法分层（想象一下如果程序的方法无法嵌套调用会怎样），就无法解决可读性和重用性这两个问题的矛盾。
