基于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 相关文章推荐
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
JavaScript中对象介绍
Dec 31 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
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
桌面中心(二)数据库写入
2006/10/09 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Django框架安装方法图文详解
2019/11/04 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
饮料业务员岗位职责
2013/12/15 职场文书
外语系毕业生自荐信范文
2013/12/16 职场文书
银行职业规划书范文
2013/12/28 职场文书
六十大寿答谢词
2014/01/12 职场文书
企业元宵节主持词
2014/03/25 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android