Jquery scrollTop animate 實現動態滾動到頁面頂部
這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足!
之後參考了一些網站,發現都是用的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 實現動態滾動到頁面頂部的更多相关文章
- [實現DDD] 第10章 聚合(1)設計原則
聚合只是將一些實體(Entity)與值對象(Value Object)聚集起來的對象樹嗎?? 有些途徑可能使我們設計出不正確的聚合模型, 如:可能為了對象組合上的方便而將聚合設計的很大;也可能設計的聚 ...
- jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...
- 動態SQL運用實例
動態SQL運用實例 語法8.1.6之前: EXECUTE IMMEDIATE dynamic_sql_string [INTO {define_var1 [, define_var2] ... | p ...
- 在Android中afinal框架下實現sqlite數據庫版本升級的辦法
public abstract void onUpgrade(SQLiteDatabase db,int oldVersion,int new Version) 這個方法在實現時需要重寫. pub ...
- JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (3):部署設定及應用 (转帖)
說明:這一篇主要是說明如何將程式部署到Application Server,以及程式如何運作,產生的檔案置於何處,以及如何以瀏覽器呈現(Applet),或是當成桌面應用程式,或是 桌面Applet,這 ...
- JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (2):JavaFX建立及程式碼說明 (转帖)
說明:就如同標題一樣,前端會用到JavaFX.Swing.Java Web Start.Google Map 的技術, 後端就是JDBC.Servlet的技術,以及我們會簽署認證jar檔案,這樣才可存 ...
- [C#]動態叫用Web Service
http://www.dotblogs.com.tw/jimmyyu/archive/2009/04/22/8139.aspx 摘要 Web Service對大家來說想必都不陌生,也大都了解Web S ...
- SQL Server 2016 的「動態資料遮罩 (Dynamic Data Masking)」
一些特別注重資訊安全.個人資料的公司或產業 (如: 金融.保險業),通常「測試用資料庫」的資料,會加上「遮蔽:去識別化」的功能,避免個資外洩.以往必須自己撰寫 SQL 語句或 Stored Proce ...
- 小林的VB6動態壁紙模擬程序
本項目參考了以下資料[這可能對你理解程序運行有幫助]: https://github.com/Yinmany/WinWallpaper https://blog.csdn.net/breaksoftw ...
随机推荐
- codeigniter 对数据库的常用操作
codeigniter (CI)是一个优秀.敏捷的PHP开源框架,尤其封装了对数据库的操作,很方便,以下是php ci常用的数据库操作,作个记录: /* ======================= ...
- hdu 1728:逃离迷宫(DFS,剪枝)
逃离迷宫 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- ytu 1910:字符统计(水题)
字符统计 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 421 Solved: 92[Submit][Status][Web Board] Descri ...
- Mac OS X 上的安装Lua开发环境
测试Lua环境是否已经安装: adeMacBook-Pro:perl_dev apple$ lua -bash: lua: command not found 如果没有的话就到lua官方去下载:(网址 ...
- C#控制管理VisualSVN Server 分类: C# 2014-05-29 15:51 796人阅读 评论(0) 收藏
VisualSVN Server可以用WMI接口管理(Windows Management Instrumentation). VisualSVN Server安装的计算机中,位于%VISUALSVN ...
- Phpcms V9网站从本地上传到服务器需要修改的地方
网站在本地做好后要迁移到服务器上:网站在发展的过程中,很可能多次的修改域名.那么在Phpcms V9中我们要怎么进行设置呢 请进行以下步骤的修改: Phpcms V9网站上传到服务器具体方法如下: ...
- ML 02、监督学习
机器学习算法原理.实现与实践——监督学习 机器学习包括监督学习.非监督学习.半监督学习及强化学习,这里先讨论监督学习. 监督学习的任务是学习一个模型,使模型能够对任意给定的输入,对其相应的输出做出一个 ...
- 《数据结构与算法分析》学习笔记(四)——栈ADT
一.栈ADT是what? 1.定义 栈,是限制插入和删除都只能在一个位置上进行的表. 2.图示 3.栈的基本功能 (1)是否为空 (2)进栈 (3)出栈 (4)清空 (5)取栈顶 二.栈的链表实现 # ...
- BZOJ3075 : [Usaco2013]Necklace
首先对b串做kmp求出nxt数组. 设f[i][j]表示考虑了a的前i个字符,在b中匹配到了j的最长长度,按照kmp算法直接转移即可. $ans=n-\max(f[n][j])$. 时间复杂度$O(n ...
- [leetCode][016] Add Two Numbers
[题目]: You are given two linked lists representing two non-negative numbers. The digits are stored in ...