寫一個JavaScript“返回頂部”功能

在web頁面中，如果頁面較高，為了方便使用者快速地返回頂部，都會添加一個返回頂部按鈕。

效果示範可以查看本頁。如果頁面有滾動高度，右下角就會有一個含有“返回頂部”字樣的黑色背景半透明的小條條。點擊這裡“返回頂部”字樣的按鈕後，頁面就像是抹了潤滑劑一樣，倏地一聲就滑到頂部了，同時，該點擊按鈕也玩起了躲貓貓 – 不見了。

效果示範<style>.fixed{ position:fixed; bottom:100px; width:20px; right:100px; height:80px; font-size:12px; cursor:pointer; background-color:#ccc; opacity:0; filter: alpha(opacity=0); z-index:999;}.placeholder{ height:2000px;}</style></head><div id="gotop" class="fixed">返回頂部</div><script>var tool = { //此方法為了避免在 ms 段時間內，多次執行func。常用 resize、scoll、mousemove等連續性事件中 buffer: function(func, ms, context){ var buffer; return function(){ if(buffer) return; buffer = setTimeout(function(){ func.call(this) buffer = undefined; },ms); }; }, /*讀取或設定元素的透明度*/ opacity: function(elem, val){ var setting = arguments.length > 1; if("opacity" in elem.style){//elem.style["opacity"] 讀取不到CSS class中的值 return setting ? elem.style["opacity"] = val : elem.style["opacity"]; }else{ if(elem.filters && elem.filters.alpha) { return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100; } } }, //擷取或設定文檔對象的scrollTop //function([val]) documentScrollTop: function(val){ var elem = document; return (val!== undefined) ? elem.documentElement.scrollTop = elem.body.scrollTop = val : Math.max(elem.documentElement.scrollTop, elem.body.scrollTop); }};//動畫效果var effect = { //淡入 fadein: function (elem){ var val = 0; var interval = 25; setTimeout(function(){ val += 0.1; if(val>1){ tool.opacity(elem, 1) return; }else { tool.opacity(elem, val) setTimeout(arguments.callee, interval); } },interval); }, //淡出 fadeout: function (elem){ var val = 1; var interval = 25; setTimeout(function(){ val -= 0.1; if(val < 0){ tool.opacity(elem, 0) return; }else { tool.opacity(elem,val) ; setTimeout(arguments.callee, interval); } },interval); }, //減速移動捲軸 move: function(scrollTop){ setTimeout(function(){ scrollTop = Math.floor((scrollTop * 0.65)); tool.documentScrollTop(scrollTop); if(scrollTop !=0 ){ setTimeout(arguments.callee, 25); } },25); }}; //主程式(function(){//gotop var visible = false; var elem = document.getElementById("gotop"); function onscroll(){ var scrollTop = tool.documentScrollTop(); if(scrollTop > 0){ if(!visible){ effect.fadein(elem) visible = true; } }else{ if(visible){ effect.fadeout(elem); visible = false; } } } function onclick(){ var scrollTop = tool.documentScrollTop(); effect.move(scrollTop); } elem.onclick = onclick; window.onscroll = tool.buffer(onscroll, 200, this);})();</script><div class="placeholder"></div>

JavaScript 代碼

<script type="text/javascript">var tool = {        //此方法為了避免在 ms 段時間內，多次執行func。常用 resize、scoll、mousemove等連續性事件中    buffer: function(func, ms, context){        var buffer;        return  function(){           if(buffer) return;                       buffer = setTimeout(function(){                func.call(this)                buffer = undefined;            },ms);        };    },         /*讀取或設定元素的透明度*/    opacity: function(elem, val){           var setting = arguments.length > 1;        if("opacity" in elem.style){//elem.style["opacity"] 讀取不到CSS class中的值            return setting ? elem.style["opacity"] = val : elem.style["opacity"];        }else{             if(elem.filters && elem.filters.alpha) {                return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100;            }        }    },         //擷取或設定文檔對象的scrollTop    //function([val])    documentScrollTop: function(val){        var elem = document;         return (val!== undefined) ?             elem.documentElement.scrollTop = elem.body.scrollTop = val :            Math.max(elem.documentElement.scrollTop, elem.body.scrollTop);                     }};//動畫效果var effect = {      //淡入    fadein: function (elem){        var val = 0;        var interval = 25;                 setTimeout(function(){            val += 0.1;            if(val>1){                tool.opacity(elem, 1)                return;            }else {                tool.opacity(elem, val)                setTimeout(arguments.callee, interval);            }        },interval);             },         //淡出    fadeout: function (elem){        var val = 1;        var interval = 25;                 setTimeout(function(){            val -= 0.1;                          if(val < 0){                tool.opacity(elem, 0)                return;             }else {                tool.opacity(elem,val) ;                setTimeout(arguments.callee, interval);            }        },interval);             },         //減速移動捲軸    move: function(scrollTop){        setTimeout(function(){            scrollTop = Math.floor((scrollTop * 0.65));            tool.documentScrollTop(scrollTop);            if(scrollTop !=0 ){                setTimeout(arguments.callee, 25);            }        },25);    }}; //主程式(function(){//gotop    var visible = false;    var elem = document.getElementById("gotop");         function onscroll(){        var scrollTop = tool.documentScrollTop();        if(scrollTop > 0){            if(!visible){                effect.fadein(elem)                visible = true;            }        }else{            if(visible){                effect.fadeout(elem);                visible = false;            }               }             }     function onclick(){        var scrollTop = tool.documentScrollTop();        effect.move(scrollTop);    }             elem.onclick = onclick;    window.onscroll = tool.buffer(onscroll, 200, this);})();</script>