摘要：
在之前的项目中，“返回顶部”的想法是：动态插入div，设置相对定位，即6绝对定位，当窗口“调整大小，滚动”时动态更改位置，即使窗口相对定位，也动态计算位置。新想法：动态插入一个div（如下图所示），将其居中，相对定位，然后计算元素在其中的位置。它支持固定、使用固定、IE6和单独计算。这样做的好处是，在调整窗口大小和滚动窗口时，支持固定的浏览器不需要重新计算元素的位置。IE6，我将不可避免地将代码片段粘贴到项目varTOPPANEL=“#MST common panel”，SIDEPANEL=“#MST common SIDEPANEL”，SUGGESTCLASS=“.MST common advice”，GOTOTOPCLASS=“.MST common goTop”，TPL={wrap:''，innerWrap：'，内部：'Title=“Back to top”˃Back to top'｝vargoToTop=函数（）｛if（！
以前项目里面“回到顶部”思路是：动态插入div，设置相对定位，ie6绝对定位，窗口"resize,scroll"的时候动态改变位置，即使是相对定位的时候，也要动态计算位置。
新的思路： 动态插入一个div（如下图），居中，相对定位，然后计算下位置，里面的元素，支持fixed，用fixed，IE6，单独计算，这么做的好处是，在窗口resize,scroll的时候，支持fixed的浏览器不用再重新计算元素的位置了，IE6难免的，还是要计算
顺便我把项目的里面的代码片段贴一下
var TOPPANEL = "#MST-common-panel",
SIDEPANEL = "#MST-common-sidepanel",
SUGGESTCLASS = ".MST-common-suggest",
GOTOTOPCLASS = ".MST-common-goTop",
TPL = {
wrap : '<div style="950px;position:relative;margin:0 auto;" id="MST-common-panel"></div>',
innerWrap : '<div id="MST-common-sidepanel" style="position: fixed; bottom: 10px; display: none;30px;z-index:9999" class="undis"></div>',
inner : '<a class="get-back MST-common-goTop" href="javascript:void(0);" title="返回顶部">返回顶部</a>'
}
var goToTop = function() {
if (!$(TOPPANEL).size()) {
$(document.body).prepend(TPL.wrap)
}
$(TOPPANEL).append(TPL.innerWrap);
var $wrap = $(SIDEPANEL);
this.init = function() {
var self = this,
$window = $(window);
self.setTop();
self.initCss();
$window.bind({
"scroll" : function() {
(document.body.scrollTop || document.documentElement.scrollTop) === 0 ? $wrap.hide() : $wrap.show();
$.isIE6 && setTimeout(function(){
self.initCss();
}, .5 * 1000);
},
"resize" : function() {
$.isIE6 && setTimeout(function(){
self.initCss();
}, .5 * 1000);
}
});
};
this.initCss = function() {
var cssObj, windowWidth = 950,$window = $(window);
$.isIE6 ? cssObj = {
right: "-40px",
position : "absolute",
top : $window.scrollTop() + $window.height() - 10 - $wrap.height()
} : cssObj = {
right: (document.documentElement.clientWidth - windowWidth) / 2 - 30 - 10 + "px"
};
$wrap.css(cssObj);
};
this.addCss = function(cssObj) {
$wrap.css(cssObj);
};
this.addItem = function(str) {
$wrap.append(str);
};
this.setTop = function() {
this.addItem(TPL.inner);
$wrap.find(GOTOTOPCLASS).click(function(){
window.scrollTo(0, 0);
return false;
});
}
};
SIDEPANEL = "#MST-common-sidepanel",
SUGGESTCLASS = ".MST-common-suggest",
GOTOTOPCLASS = ".MST-common-goTop",
TPL = {
wrap : '<div style="950px;position:relative;margin:0 auto;" id="MST-common-panel"></div>',
innerWrap : '<div id="MST-common-sidepanel" style="position: fixed; bottom: 10px; display: none;30px;z-index:9999" class="undis"></div>',
inner : '<a class="get-back MST-common-goTop" href="javascript:void(0);" title="返回顶部">返回顶部</a>'
}
var goToTop = function() {
if (!$(TOPPANEL).size()) {
$(document.body).prepend(TPL.wrap)
}
$(TOPPANEL).append(TPL.innerWrap);
var $wrap = $(SIDEPANEL);
this.init = function() {
var self = this,
$window = $(window);
self.setTop();
self.initCss();
$window.bind({
"scroll" : function() {
(document.body.scrollTop || document.documentElement.scrollTop) === 0 ? $wrap.hide() : $wrap.show();
$.isIE6 && setTimeout(function(){
self.initCss();
}, .5 * 1000);
},
"resize" : function() {
$.isIE6 && setTimeout(function(){
self.initCss();
}, .5 * 1000);
}
});
};
this.initCss = function() {
var cssObj, windowWidth = 950,$window = $(window);
$.isIE6 ? cssObj = {
right: "-40px",
position : "absolute",
top : $window.scrollTop() + $window.height() - 10 - $wrap.height()
} : cssObj = {
right: (document.documentElement.clientWidth - windowWidth) / 2 - 30 - 10 + "px"
};
$wrap.css(cssObj);
};
this.addCss = function(cssObj) {
$wrap.css(cssObj);
};
this.addItem = function(str) {
$wrap.append(str);
};
this.setTop = function() {
this.addItem(TPL.inner);
$wrap.find(GOTOTOPCLASS).click(function(){
window.scrollTo(0, 0);
return false;
});
}
};