問題描述：
在網頁中，我們經常會由於網頁內容過長，而需要在瀏覽網頁時有乙個快速回到網頁頂部的功能，在瀏覽網頁內容離頂部有一段距離時，出現快速回到網頁頂部的工具，從而能使我們的網頁更人性化。
問題的產生：
前幾天由於在公司做了個小專案中正好有乙個這樣的功能，當時也是以前同事用kissy框架寫的元件，感覺蠻好用的，所以想能不能用jquery把他們封裝起來 這樣以後如果離開了阿里系，那麼就不可能用kissy框架 肯定大部分是用jquery框架了 ，所以....... 但是在這個**之前在谷歌遊覽器下有個小小的bug。我想知道滾動top時候 用document.documentelement.scrolltop; 既然計算不到準確的值，經過仔細分析，發現chrome對document.documentelement.scrolltop的識別會出現誤差。不過加上document.body.scrolltop後，則顯示正常。由於document.documentelement.scrolltop和document.body.scrolltop在標準模式或者是奇怪模式下都只有乙個會返回有效的值，所以都加上也不會有問題（看來上面的問題是chrome可能把文件當作非標準文件來解析了）。
**如下 由於有詳細的注釋 所以可以直接看注釋。
/*** setting:
* !!! css中需設定，否則後果自負，哈哈
** 預設引數：
toplink:'.top', //toplink
markuptype: 0, //預設為0：居中，1：居左，2：居右
contentwidth: 1000, //布局寬度
paddingwidth: 5, //僅當居右(左)時生效，表示距布局右(左)側的間隔;
leftoffset: 0, //僅當居中時生效，divbar左側 需要超出布局的寬度
//left和right 僅在markuptype為-1 和 -2時有用。表示距視窗最左和最右的間隔
left:0,
right:0,
//！！！top和bottom 必須設定其一 預設為top:0,頂對齊。
yalign: ,
zindex:99999,//z-index屬性
display: 0//預設首屏不顯示，為1則首屏顯示。
//水平居中，頂部(間隔用yalign: 設定,預設為0)
new activetool('#divbar',);
//水平居中，底部(間隔用yalign: 設定)
new activetool('#divbar',
});//水平居左靠近主體左側，頂部(間隔用yalign: 設定)
new activetool('#divbar',);
//水平居左靠近主體左側，底部(間隔用yalign: 設定)
new activetool('#divbar',
});//水平居左，頂部(間隔用yalign: 設定),左側距離用style
new activetool('#divbar',);
//水平居左，底部(間隔用yalign: 設定),左側距離用left
new activetool('#divbar',
});****水平居右與水平居左類似****
* @change log:
* 2013-8-20 [email protected]**/
var activetool = (function(win,undefined)
config = $.extend(activetool.config,config);
self.config = config || {};
// 匹配傳參container
if($.isplainobject(container))else if(/^\./.test(container))else if(/^#/.test(container))else if($('.'+container))else
self._init();
}// 預設配置
activetool.config = ,
zindex:99999,
display: 0
};activetool.prototype = )
$(divbar).css('zindex',-1);
}else);
$(divbar).css('zindex',cfg.zindex);
}var toplink = $(cfg.toplink,divbar);
if (toplink)
$(toplink).bind('click',function(e));
}// do decoration on scrolling
$(win).bind(evt_scroll,function(e));
$(win).bind(evt_resize,function(e));
},//計算各瀏覽下的定位座標
_calcpos: function()
},cal;
if (true === isie6) else
// on scrolling
if (scrolling)
var viewwidth = $(win).width();
checkmarkup(viewwidth);
$(divbar).css();
$(divbar).css(top, ypos + px);
if (cfg.markuptype === -2)
$(divbar).css(left, xpos + px);
};} else if (isie) );
top !== undefined ? $(divbar).css(top, toppadding + px) : $(divbar).css(bottom, bottompadding + px);
var viewwidth = $(win).width();
checkmarkup(viewwidth);
if (cfg.markuptype === -2)
$(divbar).css(left, xpos + px);
};} else );
top !== undefined ? $(divbar).css(top, toppadding + px) : $(divbar).css(bottom, bottompadding + px);
var viewwidth = document.body.clientwidth;
checkmarkup(viewwidth);
if (cfg.markuptype === -2)
$(divbar).css(left, xpos + px);};}
self._calcpos = cal;
return cal();
},/* win 註冊 scroll resize 事件
* @param flag -> true 指滾動 flag -> false 指縮放
*/_decorate: function(flag));
$(divbar).css('zindex', -1);
}else );
$(divbar).css('zindex', cfg.zindex);
scrolltimer && cleartimeout(scrolltimer);
scrolltimer = settimeout(function(),delay);
}}else,delay);}}
};return activetool;
})(window);
jQuery實現回到頂部功能
在網頁中，我們經常會由於網頁內容過長，而需要在瀏覽網頁時有乙個快速回到網頁頂部的功能，在瀏覽網頁內容離頂部 有一段距離時，出現快速回到網頁頂部的工具，從而能使我們的網頁更人性化。以下分為幾個步驟來實現 步驟1 引入jquery庫 1步驟2 在網頁中引入回到頂部的網頁元素，並且設定元素的樣式 1 設定...
實現回到頂部功能
參考實現demo jquery實現回到頂部功能 利用jquery實現回到頂部功能，主要是用到了元素的定位屬性 scrolltop等 參考文章 jquery div scrolltop scrollheight 另一方面也學習了從background position的方法 摳圖 參考文章 css從大...
回到頂部按鈕
最近學習使用hexo搭建了乙個部落格，theme 使用的是geekman 在jakman基礎修改的乙個版本 在部落格中加入了回到頂部，偶然一次看到hexo 折騰筆記中的回到頂部的百分比樣式的按鈕效果，很炫酷，所以自己動手照著教程造了輪子，具體效果可進本人部落格檢視 idancy。這裡我主要針對自己的...