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 相关文章推荐
jQuery 渐变下拉菜单
Dec 15 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
Node.js实现数据推送
Apr 14 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
微信小程序实现授权登录
May 15 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 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中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
初识Javascript小结
2015/07/16 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
Python模拟登陆实现代码
2017/06/14 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
初二物理教学反思
2014/01/29 职场文书
《童年》教学反思
2014/02/18 职场文书
干部考核评语
2014/04/29 职场文书
毕业证委托书范文
2014/09/26 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
JavaScript ES6的函数拓展
2022/01/18 Javascript
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL