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 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
浅谈document.write()输出样式
May 07 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
vue实现全选和反选功能
Aug 31 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默认安装产生系统漏洞
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP实现简易图形计算器
2020/08/28 PHP
PHP实现倒计时功能
2020/11/16 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
asm.js使用示例代码
2013/11/28 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
快速入手Python字符编码
2016/08/03 Python
Python numpy 常用函数总结
2017/12/07 Python
python实现可逆简单的加密算法
2019/03/22 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
高级Java程序员面试要点
2013/08/02 面试题
安全温馨提示语大全
2015/07/14 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
个人售房合同协议书
2016/03/21 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python