html返回顶部按钮图片,goToTop（回到顶部）按钮的制作

//GoTop mg12

GoTop = function() {

this.config = {

pageWidth : 960,//页面宽度

nodeId : 'go-top',//回到顶部按钮的ID

nodeWidth : 50,//按钮宽度

distanceToBottom : 120,//距离底部高度

hideRegionHeight : 90,//消失高度

text : ''

};

this.cache = {

topLinkThread : null

}

};

GoTop.prototype = {

init : function(config) {

this.config = config || this.config;

var _self = this;

jQuery(window).scroll(function() {

_self._scrollScreen({

_self : _self

});

});

jQuery(window).resize(function() {

_self._resizeWindow({

_self : _self

});

});

_self._insertNode({

_self : _self

});

},

_insertNode : function(args) {

var _self = args._self;

var topLink = jQuery('' + _self.config.text + '');

topLink.appendTo(jQuery('body'));

if(jQuery.scrollTo) {

topLink.click(function() {

jQuery.scrollTo({

top : 0

}, 400);

return false;

});

}

var right = _self._getDistanceToBottom({

_self : _self

});

if(/MSIE 6/i.test(navigator.userAgent)) {

topLink.css({

'display' : 'none',

'position' : 'absolute',

'right' : right + 'px'

});

} else {

topLink.css({

'display' : 'none',

'position' : 'fixed',

'right' : right + 'px',

'top' : (jQuery(window).height() - _self.config.distanceToBottom) + 'px'

});

}

},

_scrollScreen : function(args) {

var _self = args._self;

var topLink = jQuery('#' + _self.config.nodeId);

if(jQuery(document).scrollTop() <= _self.config.hideRegionHeight) {

clearTimeout(_self.cache.topLinkThread);

topLink.hide();

return;

}

if(/MSIE 6/i.test(navigator.userAgent)) {

clearTimeout(_self.cache.topLinkThread);

topLink.hide();

_self.cache.topLinkThread = setTimeout(function() {

var top = jQuery(document).scrollTop() + jQuery(window).height() - _self.config.distanceToBottom;

topLink.css({

'top' : top + 'px'

}).fadeIn();

}, 400);

} else {

topLink.fadeIn();

}

},

_resizeWindow : function(args) {

var _self = args._self;

var topLink = jQuery('#' + _self.config.nodeId);

var right = _self._getDistanceToBottom({

_self : _self

});

var top = jQuery(window).height() - _self.config.distanceToBottom;

if(/MSIE 6/i.test(navigator.userAgent)) {

top += jQuery(document).scrollTop();

}

topLink.css({

'right' : right + 'px',

'top' : top + 'px'

});

},

_getDistanceToBottom : function(args) {

var _self = args._self;

var right = parseInt((jQuery(window).width() - _self.config.pageWidth) / 2 - _self.config.nodeWidth - 20, 10);

if(right < 10) {

right = 10;

}

return right;

}

};

//GoTop mg12

GoTop = function() {

this.config = {

pageWidth : 960,//页面宽度

nodeId : 'go-top',//回到顶部按钮的ID

nodeWidth : 50,//按钮宽度

distanceToBottom : 120,//距离底部高度

hideRegionHeight : 90,//消失高度

text : ''

};

this.cache = {

topLinkThread : null

}

};

GoTop.prototype = {

init : function(config) {

this.config = config || this.config;

var _self = this;

jQuery(window).scroll(function() {

_self._scrollScreen({

_self : _self

});

});

jQuery(window).resize(function() {

_self._resizeWindow({

_self : _self

});

});

_self._insertNode({

_self : _self

});

},

_insertNode : function(args) {

var _self = args._self;

var topLink = jQuery('' + _self.config.text + '');

topLink.appendTo(jQuery('body'));

if(jQuery.scrollTo) {

topLink.click(function() {

jQuery.scrollTo({

top : 0

}, 400);

return false;

});

}

var right = _self._getDistanceToBottom({

_self : _self

});

if(/MSIE 6/i.test(navigator.userAgent)) {

topLink.css({

'display' : 'none',

'position' : 'absolute',

'right' : right + 'px'

});

} else {

topLink.css({

'display' : 'none',

'position' : 'fixed',

'right' : right + 'px',

'top' : (jQuery(window).height() - _self.config.distanceToBottom) + 'px'

});

}

},

_scrollScreen : function(args) {

var _self = args._self;

var topLink = jQuery('#' + _self.config.nodeId);

if(jQuery(document).scrollTop() <= _self.config.hideRegionHeight) {

clearTimeout(_self.cache.topLinkThread);

topLink.hide();

return;

}

if(/MSIE 6/i.test(navigator.userAgent)) {

clearTimeout(_self.cache.topLinkThread);

topLink.hide();

_self.cache.topLinkThread = setTimeout(function() {

var top = jQuery(document).scrollTop() + jQuery(window).height() - _self.config.distanceToBottom;

topLink.css({

'top' : top + 'px'

}).fadeIn();

}, 400);

} else {

topLink.fadeIn();

}

},

_resizeWindow : function(args) {

var _self = args._self;

var topLink = jQuery('#' + _self.config.nodeId);

var right = _self._getDistanceToBottom({

_self : _self

});

var top = jQuery(window).height() - _self.config.distanceToBottom;

if(/MSIE 6/i.test(navigator.userAgent)) {

top += jQuery(document).scrollTop();

}

topLink.css({

'right' : right + 'px',

'top' : top + 'px'

});

},

_getDistanceToBottom : function(args) {

var _self = args._self;

var right = parseInt((jQuery(window).width() - _self.config.pageWidth) / 2 - _self.config.nodeWidth - 20, 10);

if(right < 10) {

right = 10;

}

return right;

}

};