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矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 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实现的简易版图片相似度比较
2015/01/07 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
详解python3中zipfile模块用法
2018/06/18 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
浅谈Python type的使用
2019/11/19 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python 调整图片亮度的示例
2020/12/03 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
css3教程之倾斜页面
2014/01/27 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
考试没考好检讨书
2014/01/31 职场文书
求职毕业生自荐书
2014/02/08 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
党员带头倡议书
2015/04/29 职场文书