<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="en">
<head>
????<title>Javascript?回到頂部效果</title>
<style>
*{margin:0;padding:0;}
.box?{
????width:1190px;?????
?????margin:0?auto;
????}
????#btn?{
????width:40px;
????height:40px;
????position:?fixed;
????left:50%;?
????margin-left:610px;
????bottom:30px;?
????background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg)?no-repeat?left?top;
????}
???#btn:hover?{
????background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg)?no-repeat?0?-40px;
????}
?????
????</style>
</head>
<body>
<div>
<img?src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg"?/>
</div>
<a?href="javascript:;"?id="btn"?title="回到頂部"></a>
<script?type="text/javascript"?src="jquery-1.7.2.min.js"></script>
<script>
????$(function(){
?????$("#btn").hide();
???var?top=document.documentElement.srcollTop?||?document.body.srcollTop;
???????if?(top>=100)?{$("#btn").show();}?else{$("#btn").hide();}
$("#btn").click(function(){
$("html,body").animate({scrollTop:0},300);
});
????})
</script>
</body>
</html>
2014-12-11
$(window).scroll(function(){
? ? var top = $(window).scrollTop();
? ? if (top>=100) {
? ? ? ? $("#btn").show();
? ? } else{
? ? ? ? $("#btn").hide();
? ? }
? })
2014-12-11
非常感謝如果換成下面
$(window).scroll(function(){
? ? var top = $(document).scrollTop();
document是什么意思文檔還是別的？