三分自留地
          
				
          Follow your heart
          
			          		
		
          
	
          

          

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

			
			
			
				

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

			          		
		
          
	
          

          


          

          
	
          
	
					

          
			
	
	
          
		

          1、先發(fā)效果圖   





























          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>請滾動右側(cè)滾動條查看效果</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
					
          
					
          
						@免費網(wǎng)絡(luò)記事本

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

          




          





          


          

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


          

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

          



          

				

          

          




    







          
        
	




主站蜘蛛池模板：
满城县|
保定市|
云霄县|
射洪县|
禄丰县|
肥东县|
红桥区|
醴陵市|
衡水市|
东阿县|
龙里县|
剑河县|
五峰|
泾源县|
巨鹿县|
靖远县|
霍州市|
阳泉市|
曲松县|
古蔺县|
临沧市|
光山县|
郧西县|
科技|
伊宁市|
巴中市|
延寿县|
酒泉市|
桂东县|
广宗县|
西林县|
行唐县|
武平县|
堆龙德庆县|
临漳县|
石台县|
德州市|
申扎县|
南开区|
康平县|
梁平县|