问题描述：
在网页中，我们经常会由于网页内容过长，而需要在浏览网页时有一个快速回到网页顶部的功能，在浏览网页内容离顶部有一段距离时，出现快速回到网页顶部的工具，从而能使我们的网页更人性化。
问题的产生：
前几天由于在公司做了个小项目中正好有一个这样的功能，当时也是以前同事用kissy框架写的组件，感觉蛮好用的，所以想能不能用Jquery把他们封装起来 这样以后如果离开了阿里系，那么就不可能用kissy框架 肯定大部分是用jquery框架了 ，所以....... 但是在这个代码之前在谷歌游览器下有个小小的bug。我想知道滚动top时候 用document.documentElement.scrollTop; 既然计算不到准确的值，经过仔细分析，发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后，则显示正常。由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值，所以都加上也不会有问题（看来上面的问题是Chrome可能把文档当作非标准文档来解析了）。
代码如下 由于有详细的注释 所以可以直接看注释。
/**
* Setting:
* !!! css中需设置{**;bottom:**;}，否则后果自负，哈哈
*
* 默认参数：
topLink:'.top', //toplink
markupType: 0, //默认为0：居中，1：居左，2：居右
contentWidth: 1000, //布局宽度
paddingWidth: 5, //仅当居右(左)时生效，表示距布局右(左)侧的间隔;
leftOffset: 0, //仅当居中时生效，divbar左侧 需要超出布局的宽度
//left和right 仅在markupType为-1 和 -2时有用。表示距窗口最左和最右的间隔
left:0,
right:0,
//！！！top和bottom 必须设置其一 默认为top:0,顶对齐。
YAlign: {
top:0
},
zIndex:99999,//z-index属性
display: 0//默认首屏不显示，为1则首屏显示。
//水平居中，顶部(间隔用YAlign: {top:0}设置,默认为0)
new ActiveTool('#divbar',{
topLink:'.top',//class or id
markupType: 0
});
//水平居中，底部(间隔用YAlign: {bottom:'10px'}设置)
new ActiveTool('#divbar',{
topLink:'.top',//class or id
markupType: 0,
YAlign: {
bottom:0
}
});
//水平居左靠近主体左侧，顶部(间隔用YAlign: {top:0}设置)
new ActiveTool('#divbar',{
topLink:'.top',//class or id
markupType: 1
});
//水平居左靠近主体左侧，底部(间隔用YAlign: {bottom:'10px'}设置)
new ActiveTool('#divbar',{
topLink:'.top',//class or id
markupType: 1,
YAlign: {
bottom:0
}
});
//水平居左，顶部(间隔用YAlign: {top:0}设置),左侧距离用style
new ActiveTool('#divbar',{
topLink:'.top',//class or id
markupType: -1,
left:'5px'
});
//水平居左，底部(间隔用YAlign: {bottom:'10px'}设置),左侧距离用left
new ActiveTool('#divbar',{
topLink:'.top',//class or id
markupType: -1,
left:'5px',
YAlign: {
bottom:0
}
});
****水平居右与水平居左类似****
* @change log:
* 2013-8-20 tugenhua@126.com
*
*/
var ActiveTool = (function(win,undefined){
var doc = document,
docBody = doc.body,
isIE = navigator.userAgent.match(/MSIE/)!= null,
isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null,
docelem = doc.documentElement || docBody;
function ActiveTool(container,config){
var self = this;
if(!(self instanceof ActiveTool)){
return new ActiveTool(container,config);
}
config = $.extend(ActiveTool.Config,config);
self.config = config || {};
// 匹配传参container
if($.isPlainObject(container)){
self.container = container;
}else if(/^./.test(container)){
self.container = $(container);
}else if(/^#/.test(container)){
self.container = $(container);
}else if($('.'+container)){
self.container = $('.'+container);
}else{
throw new Error('点击元素传递参数不符合!');
}
self._init();
}
// 默认配置
ActiveTool.Config = {
topLink: '.top',
markupType: 0,
contentWidth: 1000,
paddingWidth: 5,
leftOffset: 0,
left:0,
right:0,
YAlign: {
top:0
},
zIndex:99999,
display: 0
};
ActiveTool.prototype = {
_init: function(){
var self = this,
cfg = self.config,
EVT_SCROLL = 'scroll',
EVT_RESIZE = 'resize',
divBar;
// init divBar node
divBar = self.container;
// init position
self._calcPos();
// 首屏是否显示
if(cfg.display === 0){
$(divBar).css({"opacity":0})
$(divBar).css('zIndex',-1);
}else{
$(divBar).css({"opacity":1});
$(divBar).css('zIndex',cfg.zIndex);
}
var topLink = $(cfg.topLink,divBar);
if (topLink){
// hide focus for ie
if (isIE) {
topLink.hideFocus = true;
}
$(topLink).bind('click',function(e){
e.preventDefault();
$(topLink).unbind('click');
docelem.scrollTop = 0;
});
}
// do decoration on scrolling
$(win).bind(EVT_SCROLL,function(e){
self._decorate(true);
});
$(win).bind(EVT_RESIZE,function(e){
self._decorate(false);
});
},
//计算各浏览下的定位坐标
_calcPos: function(){
var self = this,
cfg = self.config,
PX = 'px',
TOP = 'top',
BOTTOM = 'bottom',
LEFT = 'left',
RIGHT = 'right',
contentWidth = cfg.contentWidth,
paddingWidth = cfg.paddingWidth,
leftOffset = cfg.leftOffset,
divBar = self.container,
top = cfg.YAlign.top,
bottomPadding = parseInt(cfg.YAlign.bottom,10),
topPadding = parseInt(top,10),
selfHeight = parseInt($(divBar).css('height'),10),//divbar自身高度
selfWidth = parseInt($(divBar).css('width'),10),//divbar自身宽度
xPos,
checkMarkup = function(viewWidth){
switch (true){
case cfg.markupType === 0:
xPos = Math.floor((viewWidth - contentWidth) / 2) - leftOffset;
break;
case cfg.markupType === 2:
xPos = Math.floor((viewWidth - contentWidth) / 2) + contentWidth + paddingWidth;
break;
case cfg.markupType === -2:
xPos = parseInt(cfg.right,10);
$(divBar).css(RIGHT, xPos + PX);
break;
case cfg.markupType === 1:
xPos = Math.floor((viewWidth - contentWidth) / 2) - paddingWidth - selfWidth;
break;
case cfg.markupType === -1:
xPos = parseInt(cfg.left,10);
break;
default:
xPos = Math.floor((viewWidth - contentWidth) / 2) - leftOffset;
}
},
cal;
if (true === isIE6) {
// for IE6
cal = function(scrolling){
var viewHeight = $(win).height(),
scrollTop = docelem.scrollTop,
yPos;
if (top !== undefined){
yPos = topPadding + scrollTop;
} else {
yPos = viewHeight - bottomPadding - selfHeight + scrollTop;
}
// on scrolling
if (scrolling) {
DOM.css(divBar, TOP, yPos + PX);
return;
}
var viewWidth = $(win).width();
checkMarkup(viewWidth);
$(divBar).css({'position':'absolute'});
$(divBar).css(TOP, yPos + PX);
if (cfg.markupType === -2){return;}
$(divBar).css(LEFT, xPos + PX);
};
} else if (isIE) {
// for IE7+ （ie9有待验证）
cal = function () {
$(divBar).css({'position':'fixed'});
top !== undefined ? $(divBar).css(TOP, topPadding + PX) : $(divBar).css(BOTTOM, bottomPadding + PX);
var viewWidth = $(win).width();
checkMarkup(viewWidth);
if (cfg.markupType === -2){return;}
$(divBar).css(LEFT, xPos + PX);
};
} else {
// for non-IE
cal = function () {
$(divBar).css({'position':'fixed'});
top !== undefined ? $(divBar).css(TOP, topPadding + PX) : $(divBar).css(BOTTOM, bottomPadding + PX);
var viewWidth = document.body.clientWidth;
checkMarkup(viewWidth);
if (cfg.markupType === -2){return;}
$(divBar).css(LEFT, xPos + PX);
};
}
self._calcPos = cal;
return cal();
},
/* win 注册 scroll resize 事件
* @param flag -> true 指滚动 flag -> false 指缩放
*/
_decorate: function(flag){
var self = this,
cfg = self.config,
divBar = self.container,
DELAY = 100,
scrollTimer,
resizeTimer;
if(flag){
var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
if(0 === scrollTop && cfg.display === 0){
$(divBar).css({'opacity':0});
$(divBar).css('zIndex', -1);
}else {
$(divBar).css({'opacity':1});
$(divBar).css('zIndex', cfg.zIndex);
scrollTimer && clearTimeout(scrollTimer);
scrollTimer = setTimeout(function(){
self._calcPos();
},DELAY);
}
}else{
resizeTimer && clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
self._calcPos();
},DELAY);
}
}
};
return ActiveTool;
})(window);