三分自留地
          
				
          Follow your heart
          
			          		
		
          
	
          

          

          
	
          
		
          
			
				
 
BlogJava ::
首頁(yè) ::
聯(lián)系 ::
聚合
 ::
管理

			
			
			
				

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

			          		
		
          
	
          

          


          

          
	
          
	
					

          
			
	
	
          
		

          1、先發(fā)效果圖   





























          2、上頁(yè)面
          <!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>請(qǐng)滾動(dòng)右側(cè)滾動(dòng)條查看效果</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) 評(píng)論(1)  編輯  收藏  
	
          

          







          
	    
    


          
	
          Feedback
          
		
		
				
          			
					
          
						# re: jquery 控制返回頂部
						
								2013-01-23 17:56
						
						carlit
					
          
					
          
						@免費(fèi)網(wǎng)絡(luò)記事本

          不好意思，才剛研究呢。  回復(fù)  更多評(píng)論
						
          
						  
					
          
				
          
				
          
			

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          

          




    







          
        
	




主站蜘蛛池模板：
威宁|
融水|
荣成市|
福贡县|
噶尔县|
彭泽县|
育儿|
兰西县|
贵阳市|
千阳县|
吉林省|
汪清县|
贵溪市|
宜都市|
新郑市|
蕲春县|
天长市|
闽清县|
固阳县|
外汇|
财经|
精河县|
三台县|
宁国市|
涞水县|
柳江县|
岳西县|
城固县|
苍山县|
长治县|
武穴市|
于田县|
滨海县|
梅州市|
南开区|
天镇县|
左权县|
永嘉县|
章丘市|
江西省|
玉环县|