jQuery怎么實現返回頂部按鈕效果

本篇內容介紹了“jQuery怎么實現返回頂部按鈕效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

當用戶瀏覽很長的頁面時，可以通過點擊頁面右下角的“返回頂部”按鈕直達頁面頂部，以方便用戶進行下一步操作。本文將使用jQuery結合CSS實現可以自由定制的各種“返回頂部”的效果。

實現過程

當頁面滾動時(監聽scroll事件)，瀏覽器滾動條處于最頂部時，隱藏“返回頂部”按鈕，當滾動條繼續向下滾動時，動態計算出當前可視窗口的高度-按鈕高度-按鈕距瀏覽器下邊緣高度得到的值，如果這個值大于某個特定的數字時，顯示“返回頂部”按鈕，否則隱藏。然后，當單擊“返回頂部”按鈕時，其實應該是一個鏈接，將滾動條滾回瀏覽器最頂部。在這個過程中，我們可以使用animate來創建動畫效果，即返回頂部時有個過渡效果。

HTML

本例依賴jQuery庫，并且我們將主要的實現過程的javascript代碼放入到gotoTop.js中，因此，先要在你需要調用的頁面引入這兩個js文件。

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/gotoTop.js"></script>

jQuery

在頁面中調用gotoTop()方法。注意在gotoTop.js，我們動態的往body中插入了“返回頂部”按鈕，它的class屬性默認是.backToTop，當然你也可以將其修改成任意class值，只要不和你的當前頁面沖突就行。

$(function(){ $(".backToTop").goToTop(); $(window).bind('scroll resize',function(){ $(".backToTop").goToTop(); }); });

上述代碼中，頁面加載時調用一次goToTop()，當滾動頁面或瀏覽器窗口大小發生變化時也調用goToTop()。

goToTop()提供了幾個主要的參數可配置。

pageWidth：頁面寬度，如960.

pageWidthJg：按鈕和頁面的間隔距離，默認為2.

pageHeightJg：按鈕和頁面底部的間隔距離，默認為100.

duration：回到頂部的速度時間，默認為200，單位毫秒，如果設置為0，則返回頂部時不會有動畫效果.

如果要定制按鈕不同的外觀，需要設置css樣式。

CSS

本文domo中給出了三個不同風格的“返回頂部”按鈕樣式，您只需要一張圖片，設置對應.backToTop的css即可。

DEMO1：仿新浪微博。Demo1

.backToTop{width:16px; background:#dff3fd url(top.gif) no-repeat 0px 5px; padding:20px 0 4px 4px; line-height:16px;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;} a.backToTop:hover{text-decoration:none; color:#f60}

DEMO2：仿QQ個人中心。Demo2

a.backToTop{width:28px; height:24px; background:#eaeaea url(top.gif) no-repeat -21px 4px; text-indent:-999em} a.backToTop:hover{background-position:-21px -19px}

DEMO3：仿天貓商品頁。Demo3

a.backToTop{width:60px; height:60px; background:url(top.gif) no-repeat -51px 0; text-indent:-999em} a.backToTop:hover{background-position:-113px 0}

“jQuery怎么實現返回頂部按鈕效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！