三分自留地
          
				
          Follow your heart
          
			          		
		
          
	
          

          

          
	
          
		
          
			
				
 
BlogJava ::
首頁 ::
聯系 ::
聚合
 ::
管理

			
			
			
				

	
          
		
          
			
			
			
				 
				4 
				Posts ::
				2 Stories
				::
				1 Comments
				::
				0 Trackbacks
			
		
          
	
          

			          		
		
          
	
          

          


          

          
	
          
	
					

          
			
	
	
          
		

          1、先發效果圖   





























          2、上頁面
          <!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">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
          <title>Back to To TEST</title>
          <LINK rel=stylesheet type=text/css href="css/lrtk.css">
          <script src="js/jquery.js"></script>
          <script type="text/javascript">
          $(function()           {
              $(window).scroll(function()           {
                            if($(this).scrollTop() != 0) {
                      $(          '#toTop').fadeIn();    
                  }           else {
                      $(          '#toTop').fadeOut();
                  }
              }          );
           
              $(          '#toTop').click(function() {
                  $(          'body,html').animate({scrollTop:0},2000);
                            return false;//返回false可以避免在原鏈接后加上# 
              }          );    
          }          );
          </script>
          </head>
          <body>
          <div style="DISPLAY: none" id="toTop"><IMG border=0 src="images/top.gif"></div>


          <div id="main" style="width:1000px;padding-top:200px;height:2000px;background:#eee; margin:0 auto;text-align:center">
                      <h1>請滾動右側滾動條查看效果</h1>
          </div>

          </body>
          </html>



          3、CSS 代碼
          #toTop {
           POSITION: fixed; 
           TEXT          -ALIGN: center;
           LINE          -HEIGHT: 30px; 
           WIDTH: 60px; 
           BOTTOM: 65px; 
           HEIGHT: 63px; 
           FONT          -SIZE: 12px;
           CURSOR: pointer; 
           RIGHT: 30px; 
           _position: absolute;
           _right: auto
          }


          示例地址：/Files/ityouknow/back_top.zip





           
 
 
  
	
          
	
	
          
		posted on 2013-01-22 21:44 大山 閱讀(194) 評論(1)  編輯  收藏  
	
          

          







          
	    
    


          
	
          Feedback
          
		
		
				
          			
					
          
						# re: jquery 控制返回頂部
						
								2013-01-23 17:56
						
						carlit
					
          
					
          
						@免費網絡記事本

          不好意思，才剛研究呢。  回復  更多評論
						
          
						  
					
          
				
          
				
          
			

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          

          




    







          
        
	




主站蜘蛛池模板：
安泽县|
樟树市|
盘山县|
楚雄市|
同仁县|
凤山县|
江达县|
大冶市|
江津市|
田东县|
洛南县|
墨玉县|
明水县|
铁力市|
阿拉善盟|
郎溪县|
安庆市|
济阳县|
嘉善县|
灵山县|
上栗县|
七台河市|
平山县|
玉溪市|
内黄县|
凉城县|
隆回县|
永年县|
大理市|
林口县|
黄冈市|
贵南县|
宁海县|
兴业县|
板桥市|
辉南县|
桑植县|
孝昌县|
潜江市|
梓潼县|
博乐市|