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随机展示头像代码
Dec 21 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
Vue实现多标签选择器
Nov 28 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
python脚本监控docker容器
2016/04/27 Python
Python探索之修改Python搜索路径
2017/10/25 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
施工资料员岗位职责
2014/01/06 职场文书
学校安全教育制度
2014/01/31 职场文书
办公室岗位职责
2014/02/12 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
节约用水广告语60条
2019/11/14 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
vue特效之翻牌动画
2022/04/20 Vue.js