JQ之控制回到頂部的速度
阿新 • • 發佈：2018-12-18
效果：通過JQ控制返回頂部的速度
程式碼如下（複製可直接使用） ：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script> </head> <body> <div style="width:100%;height:1900px;background-color: bisque;"></div> <a href="#" id="go">回到頂部</a> </body> <script type="text/javascript"> //1：jQuery.fn是jQuery的原型物件也可以寫成 $.fn //2：新增myScrollTo方法到jQuery原型($.fn) jQuery.fn.myScrollTo = function(speed) { var targetOffset = $(this).offset().top; console.log(targetOffset);//去除預設樣式後是 0 //$(this).offset()：獲得位移物件（此時其實啥也沒做） //$(this).offset().top：獲得位移高度 $('html,body').stop().animate({scrollTop: targetOffset}, speed); return this; }; // 使用自定義的方法 $("#go").click(function(){ $("body").myScrollTo(500);//呼叫，並傳入速度 return false;//阻止預設事件 }); </script> </html>