jquery編寫回到頂部外掛
阿新 • • 發佈：2018-12-19
最近需要寫一個回到頂部的小按鈕讓使用者來點選回到頂部，寫了一個很簡單的小外掛。
jquery編寫外掛一般就是通過$.extend()來擴充套件jquery,還有就是通過$.fn新增新的jquery方法、還有就是通過$.widget()應用jquery UI的部件工廠方式建立。
這裡我就用得到$.fn來向jquery新增新的方法。下面就是我的程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>回到頂部</title> <style type="text/css"> * { margin: 0px ; padding: 0px ; } .box { height: 300vh; width: 100vw; background: rgba(0, 0, 0, 0.5) } .toTop { color: #000; background: #fff; position: fixed; bottom: 5%; right: 5%; width: 80px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; display: none; } </style> </head> <body> <div class="box"> 這是頂部 </div> <div class="toTop">點擊向上</div> <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script> <script type="text/javascript"> $(function () { $.fn.toTop = function (param) { var checkTop = function () { //檢查頁面距離頂部位置的函式 if ($(document).scrollTop() > 50) { $('.toTop').fadeIn(param.showSpeed) } else if ($(document).scrollTop() <= 50) { $('.toTop').fadeOut(param.showSpeed) } }; checkTop(); $(document).scroll(function () { checkTop(); }); $(document).on('click', param.topClass, function () { $('body,html').animate({ scrollTop: 0 }, param.goTopSpeed); }); }; $('.toTop').toTop({ showSpeed: 500,//向上按鈕出現的速度 goTopSpeed: 500,//到頂部的時間 topClass:'.toTop'//按鈕的class }) }); </script> </body> </html>
這樣子一個回到頂部簡單的小外掛就寫好了。可以把js部分拿到單獨的js檔案裡面，用到就引入呼叫函式toTop。