var adv={
    duration:1000,//总时长3秒
    interval:30, //每步间隔50毫秒
    div:null, //保存移动的div对象
    height:0, //div的总高度
    init:function(){        
        this.div=document.getElementById("msg");
        var style=getComputedStyle(this.div);              
        this.height=parseFloat(style.height);
    },
    moveUpStep:function(){
        var self=this;
        var style=getComputedStyle(self.div);
        var bottom=parseFloat(style.bottom);
        bottom+=self.height*self.interval/self.duration;        
        self.div.style.bottom=bottom+"px";  
        if(bottom<=0){
setTimeout(function(){self.moveUpStep()},self.interval);
        }
    },
    startMoveUp:function(){
        var self=this;
setTimeout(function(){self.moveUpStep()},self.interval);
    },
    moveDownStep:function(){
        var self=this;
        var style=getComputedStyle(self.div);
        var bottom=parseFloat(style.bottom);
        bottom-=self.height*self.interval/self.duration;    
        self.div.style.bottom=bottom+"px";，
        if(bottom>=-self.height){
            setTimeout(function(){
                self.moveDownStep();
            },self.interval);
        }else{
            setTimeout(function(){
                self.moveUpStep();
            },5000);
        }
    },
    startMoveDown:function(){
        var self=this;
        setTimeout(function(){
            self.moveDownStep();
        },self.interval);
    }
}
window.onload=function(){
    adv.init();
    adv.startMoveUp();
    document.querySelector("#msg>a").onclick=function(){
        adv.startMoveDown();
    }
}

var adv={
    duration:1000,//总时长3秒
    interval:30, //每步间隔50毫秒
    div:null, //保存移动的div对象
    height:0, //div的总高度
    init:function(){
        //找到div对象，保存在div中
        this.div=document.getElementById("msg");
        /*获得div对象高度，保存在height中*/
        var style=getComputedStyle(this.div);
                //获得div对象最终应用的所有样式属性
        this.height=parseFloat(style.height);
    },
    moveUpStep:function(){//向上移动一步
        var self=this;//用局部变量self转接this指的当前对象
        //获得div现在最终应用的bottom值
        var style=getComputedStyle(self.div);
        var bottom=parseFloat(style.bottom);
        //将bottom值+=height*interval/duration;
        bottom+=self.height*self.interval/self.duration;
        //将bottom的值设置回div的内联样式中，替代外部样式
        self.div.style.bottom=bottom+"px";
        //如果bottom值<=0，就再次注册一次性定时器
        if(bottom<=0){//必须使用adv对象调用moveUpStep
setTimeout(function(){self.moveUpStep()},self.interval);
        }
    },
    startMoveUp:function(){//让div开始向上移动
        var self=this;
        //注册一次性定时器，放入moveUpStep
setTimeout(function(){self.moveUpStep()},self.interval);
    },
    moveDownStep:function(){//向下移动一步
        var self=this;
        //获得div现在最终应用的bottom值
        var style=getComputedStyle(self.div);
        var bottom=parseFloat(style.bottom);
        //将bottom值-=height*interval/duration;
        bottom-=self.height*self.interval/self.duration;
        //将bottom的值设置回div的内联样式中，替代外部样式
        self.div.style.bottom=bottom+"px";
        //如果bottom值>=-height，
        if(bottom>=-self.height){
        //  就再次注册一次性定时器
            setTimeout(function(){
                self.moveDownStep();
            },self.interval);
        }else{//否则
        //  在注册一次startMoveUp，设置间隔为5000毫秒
            setTimeout(function(){
                self.moveUpStep();
            },5000);
        }
    },
    startMoveDown:function(){
        var self=this;
        //注册一次性定时器
        setTimeout(function(){
            self.moveDownStep();
        },self.interval);
    }
}
window.onload=function(){
    adv.init();
    adv.startMoveUp();
    document.querySelector("#msg>a").onclick=function(){
        adv.startMoveDown();
    }
}

<div id="msg">
    <a>X</a>
  </div>

*{margin:0;padding:0}
    #msg{width:200px;height:200px;
        position:fixed;
        right:30px;
        bottom:-200px;
        background-color:LightBlue;
    }
    #msg>a{float:right;
        padding:5px 10px;
        border:1px solid black;
        cursor:pointer;
    }