您的位置:首页
返回顶部的插件
2016-06-22 16:45
260 查看
插件 manhuatoTop.js
样式 manhuatoTop.css
使用方法
/*** * 返回顶部 * version:manhuatoTop.1.0.js ***/ $(function() { $.fn.manhuatoTop = function(options) { var defaults = { showHeight : 150, speed : 1000 }; var options = $.extend(defaults,options); $("body").prepend("<div id='totop'><a></a></div>"); var $toTop = $(this); var $top = $("#totop"); var $ta = $("#totop a"); $toTop.scroll(function(){ var scrolltop=$(this).scrollTop(); if(scrolltop>=options.showHeight){ $top.show(); } else{ $top.hide(); } }); $ta.hover(function(){ $(this).addClass("cur"); },function(){ $(this).removeClass("cur"); }); $top.click(function(){ $("html,body").animate({scrollTop: 0}, options.speed); }); } });
样式 manhuatoTop.css
*{} #totop{position:fixed;bottom:40px;right:8px;z-index:999;width:40px; cursor:pointer; display:none;} *html #totop{position:absolute;cursor:pointer;right:10px; display:none;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-112+"px")} #totop a{display:block;width:40px;height:60px;background:url(../images/toTop.gif) no-repeat;} #totop a.cur{background-position:-40px 0;}
使用方法
<script type="text/javascript" src="/static/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/static/js/manhuatoTop.1.0.js"></script> <link rel="stylesheet" type="text/css" href="/static/css/manhuatoTop.1.0.css"> <script type="text/javascript"> $(function (){ $(window).manhuatoTop({ showHeight : 100,//设置滚动高度时显示 speed : 500 //返回顶部的速度以毫秒为单位 }); }); </script>
相关文章推荐
- java基本算法之冒泡排序
- Redhat 4、5、6设置裸设备
- linux常用命令
- Linux当中的一些名词理解
- tar.xz文件如何解压
- 今日头条的针锋相对让腾讯开始焦虑,天天快报能否占据一席之位?
- 成为一个Java的架构师要学习哪些知识?
- 大型网站架构系列:电商网站架构案例
- 点击按钮事件
- 读书笔记——基于位置的服务(LBS)
- atexit()函数
- bootstrap - 表格(条纹、边框、压缩)
- 浅谈操作系统的四个特征
- 10-1-直接插入排序-内部排序-第10章-《数据结构》课本源码-严蔚敏吴伟民版
- Citrix XenServer 6.1特性介绍之存储和VDI在线迁移—-- 简介篇
- 深度学习之(八)决策树与迭代决策树(GBDT)
- 百度地图(一)
- CUDA计时差别
- [转+整理]关于linux静态库和动态库的分析
- 简单的邮箱开发1----Java