這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足!

之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能。

         $.fn.backTop = function (options) {/*back & scroll to top */
var defaults = {
speed : 1000 //滾動到頂部的速度設置 單位是毫秒
,mouseEvent: "click"//事件觸發類型
,scrollTop:600 //配置滾動多少距離後出現“top”按鈕
,callback:function() {//animate(css,speed,callback);中的callback
alert(1);
}
,initScroll: function () {
$(window).bind('scroll',function () {
var top = $(this).scrollTop();
if(top>=options.scrollTop) {//配置滾動多少距離後出現“到頂部”按鈕
$("#backTop").fadeIn(500);return false;
} else {
$("#backTop").fadeOut(500);return false;
}
})
}
}
,options = $.extend(defaults,options);
options.initScroll();//實現滾動到一定文職自動出現“到頂部”按鈕
return this.each(function () {
var $this = $(this);
$this.bind(options.mouseEvent,function(e){
if(/webkit/.test(navigator.userAgent.toLowerCase())){
var dom = $("body");//如果是webkit內核的瀏覽器,滾動條是body
} else {
var dom = $("html");//否則滾動條是html
}
dom.animate({scrollTop:"0"},options.speed,function () {
options.callback();
});
e.stopPropagation();
})
})
}

調用方法:

$("#back-top").backTop({
"scrollTop": 600
,"speed":600
,callback:function () {
/*回到頂部後的處理函數*/
}
});

 

Jquery scrollTop animate 實現動態滾動到頁面頂部的更多相关文章

  1. [實現DDD] 第10章 聚合(1)設計原則

    聚合只是將一些實體(Entity)與值對象(Value Object)聚集起來的對象樹嗎?? 有些途徑可能使我們設計出不正確的聚合模型, 如:可能為了對象組合上的方便而將聚合設計的很大;也可能設計的聚 ...

  2. jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  3. 動態SQL運用實例

    動態SQL運用實例 語法8.1.6之前: EXECUTE IMMEDIATE dynamic_sql_string [INTO {define_var1 [, define_var2] ... | p ...

  4. 在Android中afinal框架下實現sqlite數據庫版本升級的辦法

    public abstract void onUpgrade(SQLiteDatabase db,int oldVersion,int new Version) 這個方法在實現時需要重寫.   pub ...

  5. JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (3):部署設定及應用 (转帖)

    說明:這一篇主要是說明如何將程式部署到Application Server,以及程式如何運作,產生的檔案置於何處,以及如何以瀏覽器呈現(Applet),或是當成桌面應用程式,或是 桌面Applet,這 ...

  6. JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (2):JavaFX建立及程式碼說明 (转帖)

    說明:就如同標題一樣,前端會用到JavaFX.Swing.Java Web Start.Google Map 的技術, 後端就是JDBC.Servlet的技術,以及我們會簽署認證jar檔案,這樣才可存 ...

  7. [C#]動態叫用Web Service

    http://www.dotblogs.com.tw/jimmyyu/archive/2009/04/22/8139.aspx 摘要 Web Service對大家來說想必都不陌生,也大都了解Web S ...

  8. SQL Server 2016 的「動態資料遮罩 (Dynamic Data Masking)」

    一些特別注重資訊安全.個人資料的公司或產業 (如: 金融.保險業),通常「測試用資料庫」的資料,會加上「遮蔽:去識別化」的功能,避免個資外洩.以往必須自己撰寫 SQL 語句或 Stored Proce ...

  9. 小林的VB6動態壁紙模擬程序

    本項目參考了以下資料[這可能對你理解程序運行有幫助]: https://github.com/Yinmany/WinWallpaper https://blog.csdn.net/breaksoftw ...

随机推荐

  1. sina sae 部署 java ssh 项目

    转自:http://jacobcookie.iteye.com/blog/1876798 1. 在sae上使用struts,需要添加的Listener,在com.company.listener中添加 ...

  2. matlab练习程序(图像马赛克)

    处理原理就是将邻域像素平均值赋给邻域中的所有像素. 这里将处理方法分为了带线条和不带线条,带线条处理后的视觉效果要好些. 原图: 处理结果(不带线条): 处理结果(带线条): 代码处理的是带线条的情况 ...

  3. HDU 4342History repeat itself 数学

    C - History repeat itself Time Limit:1000MS     Memory Limit:32768KB      Description Tom took the D ...

  4. 建模算法(三)——非线性规划

    一.非线性规划和线性规划不同之处 1.含有非线性的目标函数或者约束条件 2.如果最优解存在,线性规划只能存在可行域的边界上找到(一般还是在顶点处),而非线性规划的最优解可能存在于可行域的任意一点达到. ...

  5. bug 调试了一个下午外加半个晚上的bug

    public void queryTaskResult2() throws Exception { HttpServletRequest request = ServletActionContext. ...

  6. BZOJ2102 : [Usaco2010 Dec]The Trough Game

    暴力枚举答案然后检验. #include<cstdio> int n,m,i,j,k,a[100],b[100],cnt,ans;char s[20]; int main(){ for(s ...

  7. ios batchRequest

    https://github.com/facebook/pop AF 为什么要用 一个线程去进行  1.这有什么好处  因为其生产额外的线程也要 开销的   asi 和af都是这么去做的  2.本身所 ...

  8. Origami

    Origami 是一个来自 Facebook 设计团队的作品,是 Quartz Composer 的免费工具包,可在无需编程的情况下轻松实现与设计原型进行交互.

  9. 手机开发必备技巧:javascript及CSS功能代码分享

    1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同 ...

  10. Catalan数 && 【NOIP2003】出栈序列统计

    令h(1)=1, h(0)=1,catalan数满足递归式: h(n)=h(0)*h(n-1)+h(1)*h(n-2)+...+h(n-1)h(0) (n>=2) =C(2n, n)/(n+1) ...