jquery配合css简单实现返回顶部效果


Posted in Javascript onSeptember 30, 2013

CSS:

.backToTop { 
display: none; 
width: 18px; 
line-height: 1.2; 
padding: 5px 0; 
background-color: #000; 
color: #fff; 
font-size: 12px; 
text-align: center; 
position: fixed; 
_position: absolute; 
right: 10px; 
bottom: 100px; 
_bottom: "auto"; 
cursor: pointer; 
opacity: .6; 
filter: Alpha(opacity=60); 
}

jQuery代码
(function() { 
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) 
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() { 
$("html, body").animate({ scrollTop: 0 }, 120); 
}), $backToTopFun = function() { 
var st = $(document).scrollTop(), winh = $(window).height(); 
(st > 0)? $backToTopEle.show(): $backToTopEle.hide(); 
//IE6下的定位 
if (!window.XMLHttpRequest) { 
$backToTopEle.css("top", st + winh - 166); 
} 
}; 
$(window).bind("scroll", $backToTopFun); 
$(function() { $backToTopFun(); }); })();:
Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
Vue核心概念Action的总结
Jan 18 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 #Javascript
jquery得到font-size属性值实现代码
Sep 30 #Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 #Javascript
js防止表单重复提交的两种方法
Sep 30 #Javascript
js借助ActiveXObject实现创建文件
Sep 29 #Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 #Javascript
在父页面调用子页面的JS方法
Sep 29 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python self,cls,decorator的理解
2009/07/13 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python构建基础的爬虫教学
2018/12/23 Python
学习Django知识点分享
2019/09/11 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
置业顾问岗位职责
2014/03/02 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
3分钟演讲稿
2014/04/30 职场文书
2014年小学工作总结
2014/11/26 职场文书
个人委托函范文
2015/01/29 职场文书
信访工作个人总结
2015/03/03 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
科普 | 业余无线电知识-波段篇
2022/02/18 无线电