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+thickbox仿校内登录注册框
Jun 07 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
TypeScript入门-接口
Mar 30 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
Element Dialog对话框的使用示例
Jul 26 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
根德YB400的电路分析
2021/03/02 无线电
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP中显示格式化的用户输入
2006/10/09 PHP
获取远程文件大小的php函数
2010/01/11 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
vue3.0实现插件封装
2020/12/14 Vue.js
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python 读取摄像头数据并保存的实例
2018/08/03 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python测试模块doctest使用解析
2019/08/10 Python
python 模拟登陆163邮箱
2020/12/15 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
商场促销活动总结
2014/07/10 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android