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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
JS 表单验证大全
Nov 23 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 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超级全局变量
2010/01/26 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python中封包建立过程实例
2021/02/18 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
公立医院改革实施方案
2014/03/14 职场文书
探亲假请假条
2014/04/11 职场文书
设计顾问服务计划书
2014/05/04 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
小学英语新课改心得体会
2016/01/22 职场文书