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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
php网站地图生成类示例
2014/01/13 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python黑魔法之参数传递
2016/02/12 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Pandas的Apply函数具体使用
2020/07/21 Python
用python写爬虫简单吗
2020/07/28 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
大学生暑期实践感言
2014/02/26 职场文书
求职个人评价范文
2014/04/09 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
刑事起诉书范文
2015/05/19 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
字节飞书面试promise.all实现示例
2022/06/16 Javascript