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实现图片信息的浮动显示实例代码
Aug 28 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
vue引用外部JS的两种种方法
Jan 28 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 版本]
2007/03/20 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python科学计算之Pandas详解
2017/01/15 Python
python用户管理系统的实例讲解
2017/12/23 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python中的colorlog库使用详解
2019/07/05 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
投标授权委托书范文
2014/08/02 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
2019同学聚会主持词
2019/05/06 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
讨论nginx location 顺序问题
2022/05/30 Servers