基于jquery的回到页面顶部按钮


Posted in Javascript onJune 27, 2011

css代码:

.scroll-up { 
background: #dcdcdc url('up.png') no-repeat center center; 
width:48px !important; /*for ff and other standard browser*/ 
height:48px !important; 
_width: 58px; /*for IE6 nonstandard box model*/ 
_height: 58px; 
position: fixed; 
_position: absolute; /*for IE6 fixed bug*/ 
opacity: .6; 
filter: Alpha(opacity=60); /*for IE opacity*/ 
padding:5px; 
cursor: pointer; 
display: none; 
/*css3 property for ff chrome*/ 
border-radius:5px; 
-webkit-transition-property: background-color, opacity; 
-webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease; 
-moz-transition-property: background-color; 
-moz-transition-duration: 1s; 
-moz-transition-timing-function: ease; 
} 
.scroll-up:hover { 
background-color:#B9B9B9; 
opacity: .8; 
}

下面是jquery代码
;(function($) { 
$.scrollBtn = function(options) { 
var opts = $.extend({}, $.scrollBtn.defaults, options); 
var $scrollBtn = $('<DIV></DIV>').css({ 
bottom: opts.bottom + 'px', 
right: opts.right + 'px' 
}).addClass('scroll-up').attr('title', opts.title) 
.click(function() { 
$('html, body').animate({scrollTop: 0}, opts.duration); 
}).appendTo('body'); 
// 绑定到window的scroll事件 
$(window).bind('scroll', function() { 
var scrollTop = $(document).scrollTop(), 
viewHeight = $(window).height(); 
// 小于配置的显示范围 则fadeOut 
if(scrollTop <= opts.showScale) { 
if($scrollBtn.is(':visible')) 
$scrollBtn.fadeOut(500); 
// 大于配置的显示范围 则fadeIn 
} else { 
if($scrollBtn.is(':hidden')) 
$scrollBtn.fadeIn(500); 
} 
// 解决IE6下css中fixed没有效果的bug 
if(isIE6()) { 
var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom; 
$scrollBtn.css('top', top + 'px'); 
} 
}); 
// 判断是否为IE6 
function isIE6() { 
if($.browser.msie) { 
if($.browser.version == '6.0') return true; 
} 
} 
}; 
/** 
* -params 
* -showScale: scroll down how much to show the scrollup button 
* -right: to right of scrollable container 
* -bottom: to bottom of scrollable container 
*/ 
$.scrollBtn.defaults = { // 默认值 
showScale: 100, // 超过100px 显示按钮 
right:10, 
bottom:10, 
duration:200, // 回到页面顶部的时间间隔 
title:'back to top' // div的title属性 
} 
})(jQuery); 
$.scrollBtn({ 
showScale: 200, //下滚200px后 显示按钮 
bottom:20, // 靠底部20px 
right:20 // 靠右部20px 
});

backToTop.rar
Javascript 相关文章推荐
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
jQuery实现全选按钮
Jan 01 jQuery
jQuery新闻滚动插件 jquery.roller.js
Jun 27 #Javascript
jquery中获取select选中值的代码
Jun 27 #Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 #Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 #Javascript
读jQuery之十 事件模块概述
Jun 27 #Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 #Javascript
jQuery表格行换色的三种实现方法
Jun 27 #Javascript
You might like
深入理解javascript中defer的作用
2013/12/11 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JS常见算法详解
2017/02/28 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
对python函数签名的方法详解
2019/01/22 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python-接口开发入门解析
2019/08/01 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python类如何定义私有变量
2020/02/03 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
办理暂住证介绍信
2014/01/11 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书