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作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JavaScript构造函数详解
Dec 27 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php 问卷调查结果统计
2015/10/08 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
vue引入swiper插件的使用实例
2017/07/19 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
vue实现通讯录功能
2018/07/14 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
Python与Redis的连接教程
2015/04/22 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python标准库之collections包的使用教程
2017/04/27 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
网络工程师的自我评价
2013/10/02 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
创业计划书之服装
2019/10/07 职场文书