英雄联盟周边商城服饰上新时，有做一个移动端，首页翻屏，但是后面都是滚动效果的
touch事件分三步。touchstart,touchmove,touchend

<div class="g-wrap">
    <div class="top">
     //需要翻屏的首页
    </div>
    <div class="g-main">
        <a name="content"></a>
        //滚动的内页
    </div>
</div>
<script>
    var annzmy= {
        init: function () {
            var winH = $(window).height();//获取页面高度
            var obj_= $('.top');//整屏部分
            var scllObj = $('.g-wrap');//整个页面
            var sY,sMove,sEnd,contrast;
            //整屏部分绑定触摸touchstart事件
            obj_.bind('touchstart',function(e){
                var evt = e ? e:window.event;
                evt.preventDefault();//阻止元素默认事件冒泡
                var touch = evt.touches[0];//获取第一个触点
                sY = touch.clientY;//页面触点的Y坐标
                scllObj.css({
                    'transition':'none'
                })
            });
            //滑动事件，页面滑动的效果
            obj_.bind('touchmove',function(e) {
                var evt = e ? e:window.event;
                evt.preventDefault();
                var touch = evt.touches[0];
                sMove = touch.clientY;//获取滑动时的Y坐标
                scllObj.css({
                    'transform':'translateY(' + (sMove - sY) + 'px)',//滑动此时的坐标-开始触摸的坐标=回正所需位移
                    'transition':'none'
                })
            });
            //触摸结束
            obj_.bind('touchend',function(e){
                var evt = e ? e:window.event;
                var touch = evt.changedTouches[0];
                sEnd = touch.clientY;
                contrast =  sEnd - sY;//结束时的坐标-开始时的坐标
                if(contrast > -120){
                    scllObj.css({
                        'transform':'translateY(0px)',
                        'transition':'.3s'
                    })
                }else{
                    scllObj.css({
                        'transform':'translateY(-100vh)',//滑动查过一定距离，翻屏
                        'transition':'.3s',
                        'margin-bottom': '-100vh'
                    })
                }
            });

            //内容滑动
            $('.g-main').on('touchstart',function (e) {
                var evt = e ? e:window.event;
                var touch = evt.touches[0];
                sY = touch.clientY
            });
            $('.g-main').on('touchmove',function (e) {
                var evt = e ? e:window.event;
                var touch = evt.touches[0];
                sMove = touch.clientY;
                var movePx = sMove - sY;//移动的距离，大于零代表向下
                var contTop = $('a[name=content]').offset().top;//此页面顶点距离窗口顶部的距离
               
                if(contTop >= 0 && movePx > 10){
                    evt.preventDefault();
                    scllObj.css({
                        'transform':'translateY(-' + (winH - movePx) + 'px)',
                        'transition':'none'
                    })
                }
            });
            $('.g-main').on('touchend',function (e) {
                var evt = e ? e : window.event;
                var touch = evt.changedTouches[0];
                sEnd = touch.clientY;
                var movePx = sEnd - sY;
                var contTop = $('a[name=content]').offset().top;
                if (contTop >= 0 && movePx > 120) {
                    scllObj.css({
                        'transform': 'translateY(0px)',
                        'transition': '.3s'
                    })
                } else {
                    scllObj.css({
                        'transform': 'translateY(-100vh)',
                        'transition': '.3s'
                    })
                }
            });
        }
    };
    $(function () { annzmy.init(); });
</script>