写一个JavaScript“返回顶部”功能

在web页面中，如果页面较高，为了方便用户快速地返回顶部，都会添加一个返回顶部按钮。

效果演示可以查看本页。如果页面有滚动高度，右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条。点击这里“返回顶部”字样的按钮后，页面就像是抹了润滑剂一样，倏地一声就滑到顶部了，同时，该点击按钮也玩起了躲猫猫 – 不见了。

效果演示

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>