我写了一个用于兼容IE的fix的返回顶部插件。
(function($) {
var _opts_default = {
startline: 1,
title: '返回顶部',
bottom: 50,
right: 50,
scrollto: 0,
scrollduration: 200,
fadeduration: [500, 100],
html: '<img style="width:54px; height:54px; border:0;" />',
opacity: 0.5
};
var _opts;
var methods = {
_fixed_support: false,
content: null,
_body: '',
isvisible: false,
shouldvisible: false,
ie_offset_x: 0,
ie_offset_y: 0,
init: function(options) {
$(document).ready(function() {
_opts = $.extend(_opts_default, options);
//这句是精髓了
methods._body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
methods.content = $('<div>' + _opts.html + "</div>").css({
opacity: 0,
cursor: "pointer"
}).attr({
title: _opts.title
}).click(function() {
methods.scrollup();
return false;
}).appendTo("body").Fixed({
'right': 35,
'bottom': 35
});
methods.togglecontrol();
$(window).bind("scroll resize",
function(e) {
methods.togglecontrol();
});
});
},
scrollup: function() {
this.content.hide();
var dest = isNaN(_opts.scrollto) ? _opts.scrollto: parseInt(_opts.scrollto);
if (typeof dest == "string" && jQuery("#" + dest).length == 1) {
dest = $("#" + dest).offset().top;
} else {
dest = 0;
}
this._body.animate({
scrollTop: dest
},
this.scrollduration);
},
togglecontrol: function() {
var scrolltop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
this.shouldvisible = (scrolltop >= _opts.startline) ? true: false;
if (this.shouldvisible && !this.isvisible) {
this.content.show();
this.content.stop().animate({
opacity: _opts.opacity
},
_opts.fadeduration[0]);
this.isvisible = true;
} else if (!this.shouldvisible && this.isvisible) {
this.content.stop().animate({
opacity: 0
},
_opts.fadeduration[1]);
this.isvisible = false;
this.content.hide();
} else if (this.shouldvisible && this.isvisible) {
this.content.show();
} else if (!this.shouldvisible && !this.isvisible) {
this.content.hide();
}
}
};
$.ToTop = function(options) {
methods.init(options);
};
})(jQuery);
(function($) {
$.fn.Fixed = function(options) {
var fix_opts = $.extend({
top: undefined,
left: undefined,
right: undefined,
bottom: undefined
},
options);
var fixed = !document.all || document.all && document.compatMode == "CSS1Compat" && window.XMLHttpRequest;
//if(fixed) {
$(this).css('position', (fixed ? 'fixed': 'absolute'));
if (fix_opts.top != undefined) $(this).css('top', fix_opts.top);
if (fix_opts.left != undefined) $(this).css('left', fix_opts.left);
if (fix_opts.right != undefined) $(this).css('right', fix_opts.right);
if (fix_opts.bottom != undefined) $(this).css('bottom', fix_opts.bottom);
/*这里好像在搜狗的IE模式下有问题,我也不知道怎么办了
}
else
{
$(this).attr('style',
'_position:'+(fixed?'fixed':'absolute')+';'+
(fix_opts.top==undefined?'':'_top:'+fix_opts.top+';')+
(fix_opts.left==undefined?'':'_left:'+fix_opts.left+';')+
(fix_opts.right==undefined?'':'_right:'+fix_opts.right+';')+
(fix_opts.bottom==undefined?'':'_bottom:'+fix_opts.bottom+';')
);
alert($(this).attr('style'));
}
*/
function pageX(elem) {
return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
function pageY(elem) {
return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}
var _x = pageX($(this)[0]);
var _y = pageY($(this)[0]);
if (!fixed) {
var self = $(this);
$(window).bind("scroll resize",
function(e) {
var _scrltp = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
var _scrllft = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
self.css({
'top': _scrltp + _y,
'left': _scrllft + _x
});
});
}
return $(this);
};
})(jQuery);
至于Quircks模式,看
这里