模仿原生淘宝app点击搜索时的页面滑动效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
    height:100%;
}
*{margin: 0;padding: 0;box-sizing:border-box}
#scrollLeft{
         100%;
        height: 100%;
        overflow: scroll;
        background:white;
        display: none;
        z-index: 999;
        top: 0;
        position: fixed;
}
#scrollLeft div{
        height: 200px;
        border-bottom: 1px solid black;
        background: yellow
}
#scrollLeft div:nth-child(2n){
        background: green;
}
</style>
<script src="jquery1.42.min.js"></script>
</head>
<body>
<div id="search" style="height: 100px;text-align:center; line-height: 100px;font-size: 30px;border: 2px solid black;position: absolute;top: 0;left: 0; 100%">搜索</div>

<div id="scrollLeft">
<input type="button" id="retu" value="<<返回" style=" 100%;height: 100px;font-size: 50px;text-align: left; "><br>
<div>11111111111111111</div>
<div>22222222222222222</div>
<div>33333333333333333</div>
<div>44444444444444444</div>
<div>55555555555555555</div>
<div>66666666666666666</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<span></span>

</div>
<script type="text/javascript">
$('#search').click(function(){
	var screenWidth=$(window).width();
	$('#scrollLeft').css('left',screenWidth+"px").show().animate({'left':'0'},400);
	$(this).animate({'left':'-200px'},400)
})
$("#retu").click(function(){
	var screenWidth=$(window).width();
	$('#scrollLeft').animate({'left':screenWidth+"px"},400);
	$('#search').animate({'left':'0'},400);
})

</script>
</body>
</html>
请爱好前端技术的朋友，联系我，有问题大家一起讨论