三分自留地
          
				
          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 大山 閱讀(195) 評論(1)  編輯  收藏  
	
          

          







          
	    
    


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

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

          




          





          


          

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


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          

          




    







          
        
	




主站蜘蛛池模板：
都昌县|
东乡|
湖州市|
常山县|
金溪县|
沁源县|
衡水市|
同仁县|
西丰县|
冕宁县|
沙田区|
万安县|
海丰县|
锦屏县|
大厂|
视频|
微山县|
洛阳市|
宿松县|
淳安县|
余干县|
石狮市|
墨江|
武山县|
永川市|
锦屏县|
宜阳县|
视频|
高要市|
宝清县|
张家川|
光山县|
准格尔旗|
墨脱县|
建德市|
汉寿县|
新和县|
天镇县|
郯城县|
中江县|
筠连县|