html返回顶部按钮图片,goToTop（回到顶部）按钮的制作 Love The Way You Lie 2022-10-06 08:58 179阅读 0赞 //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; \} \};
还没有评论，来说两句吧...