上部のjsコードを簡単に返す

6109 ワード
職場 レジャー 上部のjsコードを簡単に返す
一部のウェブサイトでは、スクロールバーが最後までスクロールすると上部に戻る小さなボタンがよく見られます.私がクリックすると、そのスクロールバーが迅速にまたは均一に上部に戻るという効果があります.今日もjqueryで簡単な原理を書いています.iE 6のデフォルトではfixedで底部の右側を固定して隠しています.スクロールバーで一定の距離までスクロールして表示させ、クリックすると右側のスクロールバーをすばやくまたは均一に上部に戻します!もちろんIE 6ではfixedはサポートされていませんが、絶対的な位置決めと式を使用していますが、小さな問題があります.IE 6 7では少し震えますのでhtml、html body{background-image:url(about:blank);background-attachment:fixed;}このようなコードは解決することができます!!
コードは以下の通り:HTML/CSS
  

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5. <title>     </title> 
    6. 
   
   
   
   
  6. <style> 
    7. 
   
   
   
   
  7. #top-back{position:fixed; right:20px; height:20px; bottom: 0px; display: none;*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-20))} 
    8. 
   
   
   
   
  8. html,html body {background-image:url(about:blank);background-attachment:fixed;}  
    9. 
   
   
   
   
  9. </style> 
    10. 
   
   
   
   
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    
    11. 
   
   
   
   
  11. </head> 
    12. 
   
   
   
   
  12.  
    13. 
   
   
   
   
  13. <body> 
    14. 
   
   
   
   
  14.  
    15. 
   
   
   
   
  15.     <div style="height:2000px;"></div> 
    16. 
   
   
   
   
  16.     <div id="top-back">    </div> 
    17.

Jqueryは以下の通りです.
  

  
  
  
  
    
   
   
   
   
  1. <script> 
    2. 
   
   
   
   
  2.     function topBack(){ 
    3. 
   
   
   
   
  3.         var sh = $(window).scrollTop(); 
    4. 
   
   
   
   
  4.         if(sh>100){ 
    5. 
   
   
   
   
  5.             $("#top-back").show(); 
    6. 
   
   
   
   
  6.         }else{ 
    7. 
   
   
   
   
  7.             $("#top-back").hide();   
    8. 
   
   
   
   
  8.         }    
    9. 
   
   
   
   
  9.     } 
    10. 
   
   
   
   
  10.     $(window).scroll(function(){ 
    11. 
   
   
   
   
  11.         topBack();   
    12. 
   
   
   
   
  12.     }) 
    13. 
   
   
   
   
  13.     $(window).resize(function(){ 
    14. 
   
   
   
   
  14.         topBack();   
    15. 
   
   
   
   
  15.     })   
    16. 
   
   
   
   
  16.     $("#top-back").click(function(){$("html,body").animate({scrollTop:"0px"},200)}); //       
    17. 
   
   
   
   
  17. </script> 
    18.

Jquery ui datepickerは3日しか間隔がないように日付範囲を設定する.
マウスサスペンション2段メニューを作成する場合、jQueryマウスが同時に2つの領域を移動する判断