先來個效果圖

再貼代碼...
此處使用vue的方式寫，如使用其它框架，按思路修改即可。

<template>
    <div class="all" @touchstart.stop.prevent="touchstart" @touchmove.stop.prevent="touchmove" @touchend.stop.prevent="touchend">
        <div class="top" ref='login'>
            登陸
        </div>
        <div class="bottom" ref="reg">
            注冊
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            clientHeight:document.body.clientHeight,//屏幕高度
            startclientY:0,//開始點擊的高度
            clientMove:0,//移動距離
            nextPage:true,//當前頁面
        }
    },
    methods:{
        touchstart(e){
            this.startclientY = e.touches[0].clientY;//Y
        },
        touchmove(e){
            this.clientMove = this.startclientY-e.touches[0].clientY;//計算移動距離
                //跟隨鼠標移動頁面
            if(this.nextPage){
                this.$refs.reg.style.top = this.clientHeight-this.clientMove+'px';
            }else{
                this.$refs.login.style.top = this.clientHeight-this.clientMove+'px';
            }
        },
        touchend(e){
            if(this.clientMove>=50){//移動距離超過50px
                if(this.nextPage){
                    //添加動畫
                    this.$refs.reg.className = 'bottom go_top';
                    setTimeout(()=>{
                        this.$refs.reg.className = 'bottom go_top1';
                    },600);
                    //動畫執(zhí)行結(jié)束，修改底部頁面位置
                    setTimeout(()=>{
                        this.$refs.login.className = 'top';
                        this.$refs.login.style.top = this.clientHeight+'px';
                        this.$refs.login.style.zIndex = 2;
                        this.nextPage = !this.nextPage;
                    },1100);
                }else{
                    this.$refs.login.className = 'top go_top';
                    setTimeout(()=>{
                        this.$refs.login.className = 'top go_top1';
                    },600);
                    setTimeout(()=>{
                        this.$refs.reg.className = 'bottom';
                        this.$refs.reg.style.top = this.clientHeight+'px';
                        this.$refs.login.style.zIndex = 0;
                        this.nextPage = !this.nextPage;
                    },1100);
                }
            }else{
                //復原
                if(this.nextPage){
                    this.$refs.reg.style.top = this.clientHeight+'px';
                    this.$refs.login.style.top = '0px';
                }else{
                    this.$refs.login.style.top = this.clientHeight+'px';
                    this.$refs.reg.style.top = '0px';
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/reset.scss";
.all{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.top{
    background: #FDDB43;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
}
.bottom{
    background: #00AA9A;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 100vh;
}
.go_top{
    animation: goTop .6s ease-in forwards;
    animation-timing-function: cubic-bezier(.4, .2, .9, .6);
}
.go_top1{
    animation: goTop1 .5s linear forwards;
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1);
}
@keyframes goTop{
    100%{top:0;}
}
@keyframes goTop1{
    0%{top: 0;}
    30%{top: 30px;}
    60%{top:5px;}
    80%{top: 15px;}
    100%{top:0;}
}
</style>