首頁 > 開發者 > 網站開發

jQuery返回頂部的兩種方法(包括go-top.js)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：返回頂部   style   http   color   java   使用   os   io   

jQuery實現網頁“返回頂部”的功能，相信見到這種效果已經不稀奇了吧;那究竟如何?呢？方法還是挺多了，先介紹兩種簡單的：

第一種，只使用jquery外掛程式來實現，下面是一個完整的代碼例子，有興趣的自己摸索吧：前端UI分享

.代碼  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>使用jquery實現網頁“返回頂部”的例子</title>  
  5. <style>  
  6. .backToTop{display:none; width:18px; line-height:1.2; padding:5px 0;  ">000; color:#fff; font-size:12px; text-align:center; position:fixed; _position:absolute; right:10px; bottom:100px; _bottom:"auto"; cursor:pointer; opacity:.6; filter:Alpha(opacity=60);}  
  7. </style>  
  8. </head>  
  9. <body>  
  10.   <p>測試內容</p>  
  11.   <p>測試內容 2</p>  
  12.   <p>測試內容 3</p>  
  13.   <p>測試內容 4</p>  
  14.   <p>測試內容 5</p>  
  15.   <p>測試內容 6</p>  
  16.   <p>測試內容 7</p>  
  17.   <p>測試內容 8</p>  
  18.   <p>中間部分自己加</p>  
  19.   <p>測試內容 92</p>  
  20.   <p>測試內容 93</p>  
  21.   <p>測試內容 94</p>  
  22.   <p>測試內容 95</p>  
  23.   <p>測試內容 96</p>  
  24.   <p>測試內容 97</p>  
  25.   <p>測試內容 98</p>  
  26.   <p>測試內容 99</p>  
  27.   <p>測試內容00</p>  
  28. <!--引入jquery外掛程式，注意，這裡的jquery地址以你實際的為準-->  
  29. <script type="text/javascript" src="/js/jquery.min.js"></script>  
  30. <script>  
  31. (function() {  
  32.  var $backToTopTxt = "返回頂部", $backToTopEle = $(‘<div class="backToTop"></div>‘).appendTo($("body"))  
  33.   .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {  
  34.    $("html, body").animate({ scrollTop: 0 }, 120);  
  35.  }), $backToTopFun = function() {  
  36.   var st = $(document).scrollTop(), winh = $(window).height();  
  37.   (st > 0)? $backToTopEle.show(): $backToTopEle.hide();   
  38.   //IE6下的定位  
  39.   if (!window.XMLHttpRequest) {  
  40.    $backToTopEle.css("top", st + winh - 166);   
  41.   }  
  42.  };  
  43.  $(window).bind("scroll", $backToTopFun);  
  44.  $(function() { $backToTopFun(); });  
  45. })();  
  46. </script>  
  47. </body>  
  48. </html>  

 

第二種：使用現有外掛程式go-top.js實現。

首先請引入go-top.js外掛程式

接下來在你的頁面<style>裡添加以下CSS定義： 前端UI分享

.代碼  
  1. a#go-top{background:#E6E6E6;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:#999;}  
  2. a#go-top:hover{background:#CCC;color:#333;}  

 

最後在頁面</body>結束標籤之前加入以下代碼:

.代碼  
  1. <script src="jquery.js"></script><!--引入jquery，請以你的實際路徑為準-->  
  2. <script src="go-top.js"></script><!--引入go-top.js，同上-->  
  3. <script>  
  4. /* <![CDATA[ */  
  5. (new GoTop()).init({  
  6.  pageWidth:980,  
  7.  nodeId:‘go-top‘,  
  8.  nodeWidth:50,  
  9.  distanceToBottom:125,  
  10.  hideRegionHeight:130,  
  11.  text:‘Top‘  
  12. });  
  13. /* ]]> */  
  14. </script>  

 

兩種方法任選其一，覺得第一種就可以滿足應用了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More