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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
JS实现self的resend
Jul 22 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
jquery图片放大镜效果
Jun 23 jQuery
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue select 获取value和lable操作
Aug 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
多人战的战术与战略
2020/03/04 星际争霸
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Smarty模板语法详解
2019/07/20 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python求解平方根的方法
2015/03/11 Python
python实现机器学习之元线性回归
2018/09/06 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python调用摄像头的示例代码
2020/09/28 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
职位说明书范文
2014/05/07 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技