<!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><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Javascript 返回頂部</title><style type="text/css">#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}.bg {width:1190px; margin:0 auto;border:#F00 solid 8px; }</style></head><body><div><img src="images/tb_bg.jpg" alt="hfh" /></div>? ? <a href="javascript:;" id="btn" title="回到頂部"></a>? ??? ??<script type="text/javascript">? ?window.onload=function(){ ? ? ? ///就是等html頁面內容加載完成，后在進行加載，以便獲取頁面中的圖片和元素? var abtn=document.getElementById("btn"); ///得到元素? var timer=null;? //var returntop=true;? var clientHeight=document.documentElement.clientHeight;//獲取頁面第一版的可視高度 ?使用 ?alert(clientHeight);894可以獲取可視頁面高度??? abtn.onscroll=function(){ ?///滾動條滾動時觸發??? ?var returntop=document.documentElement.scrollTop||document.body.scrollTop;if(returntop>=clientHeight){abtn.style.display="block";//不顯示啊}else{abtn.style.display="none";}//if(!returntop)// {// ??clearInterval(timer);// }// returntop=false;? }? abtn.onclick=function(){? timer=setInterval(function(){? var returntop=document.documentElement.scrollTop||document.body.scrollTop; ?///瀏覽器的兼容? ? ?// document.documentElement.scrollTop=document.body.scrollTop-=50; ?//就是每次向上移動200px ，，如果只要簡單的話，這樣就可以了? ? ? ? var speed=returntop /5 ? //將每次的距離底部的距離一次document.documentElement.scrollTop=document.body.scrollTop=returntop - speed;??if(returntop==7)?{? clearInterval(timer);?} ? ? ????? ? ? ? ? },60)? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ?}</script></body></html>
為啥超過設定高度不顯示；
qq_蘿卜與白菜_0
2016-11-02 00:10:00
