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

Love The Way You Lie 2022-10-06 08:58 203阅读 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;

\};

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 uni-app 添加返回顶部按钮

相关 vue点击按钮回到顶部事件

相关 uniapp返回顶部按钮

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

相关回到顶部button按钮js特效

相关如何制作网页中回到顶部的悬浮按钮

相关回到顶部

相关快速回到顶部按钮

相关带动画的回到返回顶部

相关 html回到顶部代码