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 textContent与innerText的异同分析
Oct 22 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
javascript三种代码注释方法
Jun 02 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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获取文件扩展名的4种方法
2015/11/24 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
浅谈js原生拖放
2016/11/21 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
大学生四个方面的自我评价
2013/09/19 职场文书
临床医学专业毕业生的自我评价
2013/10/17 职场文书
生态学毕业生自荐信
2013/10/27 职场文书
实习生个人找工作的自我评价
2013/10/30 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
标准单位租车协议书
2014/09/23 职场文书
试用期辞职信范文
2015/03/02 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
庆七一晚会主持词
2015/06/30 职场文书