中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jquery回到頁面頂部代碼案例

發布時間：2020-07-03 18:18:51 來源：網絡 閱讀：805 作者：為夢加速 欄目：web開發

 方法一：

效果圖

jquery回到頁面頂部代碼案例

css代碼：

 

  1. .backToTop { 
  2.     display: none; 
  3.     width: 18px; 
  4.     line-height: 1.2; 
  5.     padding: 5px 0; 
  6.     background-color: #000; 
  7.     color: #fff; 
  8.     font-size: 12px; 
  9.     text-align: center; 
  10.     position: fixed; 
  11.     _position: absolute; 
  12.     right: 10px; 
  13.     bottom: 100px; 
  14.     _bottom: "auto"; 
  15.     cursor: pointer; 
  16.     opacity: .6; 
  17.     filter: Alpha(opacity=60); 
  18. } 

js代碼：

 

  1. (function() { 
  2.     var $backToTopTxt = "返回頂部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
  3.         .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
  4.             $("html, body").animate({ scrollTop: 0 }, 120); 
  5.     }), $backToTopFun = function() { 
  6.         var st = $(document).scrollTop(), winh = $(window).height(); 
  7.         (st > 0)? $backToTopEle.show(): $backToTopEle.hide();     
  8.         //IE6下的定位 
  9.         if (!window.XMLHttpRequest) { 
  10.             $backToTopEle.css("top", st + winh - 166);     
  11.         } 
  12.     }; 
  13.     $(window).bind("scroll", $backToTopFun); 
  14.     $(function() { $backToTopFun(); }); 
  15. })(); 

 方法二：

效果圖

 

jquery回到頁面頂部代碼案例

代碼：

需要引人jquery和一張向上箭頭圖片up.png

  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  6. <title>Insert title here</title> 
  7. <script type="text/javascript" src="../javascript/jquery-1.6.js"></script> 
  8. <style type="text/css"> 
  9.     body { 
  10.         height:1200px; 
  11.     } 
  12.      
  13.     #testIE6 { 
  14.         _height:1200px; 
  15.         _width:200px; 
  16.     } 
  17.      
  18.     .scroll-up { 
  19.         background: #dcdcdc url('up.png') no-repeat center center; 
  20.         width:48px !important; 
  21.         height:48px !important; 
  22.         _width: 58px; 
  23.         _height: 58px; 
  24.         position: fixed; 
  25.         _position: absolute; /*for IE6*/ 
  26.         opacity: .6; 
  27.         filter: Alpha(opacity=60); /*for IE*/ 
  28.         padding:5px;  
  29.         cursor: pointer; 
  30.         display: none; 
  31.  
  32.         border-radius:5px; 
  33.         -webkit-transition-property: background-color, opacity; 
  34.         -webkit-transition-duration: 1s; 
  35.         -webkit-transition-timing-function: ease; 
  36.          
  37.         -moz-transition-property: background-color; 
  38.         -moz-transition-duration: 1s; 
  39.         -moz-transition-timing-function: ease; 
  40.     } 
  41.     .scroll-up:hover { 
  42.         background-color:#B9B9B9; 
  43.         opacity: .8; 
  44.     } 
  45. </style> 
  46. </head> 
  47. <body> 
  48.     <div id="testIE6"></div> 
  49.     <script type="text/javascript"> 
  50.         ;(function($) { 
  51.             $.scrollBtn = function(options) { 
  52.                 var opts = $.extend({}, $.scrollBtn.defaults, options); 
  53.  
  54.                 var $scrollBtn = $('<div></div>').css({ 
  55.                                     bottom: opts.bottom + 'px', 
  56.                                     right: opts.right + 'px' 
  57.                                 }).addClass('scroll-up') 
  58.                                 .attr('title', opts.title) 
  59.                                 .click(function() { 
  60.                                     $('html, body').animate({scrollTop: 0}, opts.duration); 
  61.                                 }).appendTo('body'); 
  62.                                                                                      
  63.                 $(window).bind('scroll', function() { 
  64.                     var scrollTop = $(document).scrollTop(), 
  65.                         viewHeight = $(window).height(); 
  66.  
  67.                     if(scrollTop <= opts.showScale) { 
  68.                         if($scrollBtn.is(':visible')) 
  69.                             $scrollBtn.fadeOut(500); 
  70.                     } else { 
  71.                         if($scrollBtn.is(':hidden'))  
  72.                             $scrollBtn.fadeIn(500); 
  73.                     } 
  74.  
  75.                     if(isIE6()) { 
  76.                         var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom; 
  77.                         $scrollBtn.css('top', top + 'px'); 
  78.                     } 
  79.                 }); 
  80.  
  81.                 function isIE6() { 
  82.                     if($.browser.msie) { 
  83.                         if($.browser.version == '6.0') return true; 
  84.                     } 
  85.                 } 
  86.             }; 
  87.  
  88.             /** 
  89.              * -params  
  90.              *  -showScale: scroll down how much to show the scrollup button 
  91.              *  -right: to right of scrollable container  
  92.              *  -bottom: to bottom of scrollable container  
  93.              */ 
  94.             $.scrollBtn.defaults = { 
  95.                 showScale: 100,   
  96.                 right:10, 
  97.                 bottom:10, 
  98.                 duration:200, 
  99.                 title:'back to top' 
  100.             } 
  101.         })(jQuery); 
  102.  
  103.         $.scrollBtn({ 
  104.             showScale: 200, 
  105.             bottom:20, 
  106.             right:20 
  107.         }); 
  108.     </script> 
  109. </body> 
  110. </html> 

 

附件：http://down.51cto.com/data/2362200
向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
郎溪县| 淮北市| 大丰市| 定结县| 河津市| 旬邑县| 资源县| 若尔盖县| 武强县| 桓仁| 班戈县| 剑河县| 雷波县| 遂昌县| 大理市| 建阳市| 蓬安县| 白城市| 绥滨县| 天柱县| 深水埗区| 泌阳县| 娱乐| 霍州市| 饶河县| 织金县| 芷江| 武威市| 娱乐| 延寿县| 饶阳县| 从化市| 重庆市| 云龙县| 西平县| 舒城县| 泰宁县| 武安市| 宜川县| 淅川县| 平顺县|