问上滑一整页

EN

        <div class='sc'>
        <div class='welcome'>
            <h1>Welcome to Brownsover Walkers</h1>
        </div>

        <div class='intro'>
            <p>#1 dog walkers in the Brownsover area</p>
        </div>

var load = function(){
    $('.welcome').hide().fadeIn(2000);
    $('.intro').delay(1300).hide().fadeIn(2000);
    $('.arrow').delay(3000).hide().fadeIn(2000);
}

var unveil = function(){
    $('.arrow').click(function(){
        $('.sc').animate({
            bottom: '5000px'
        }, 500);
    });
}

$(document).ready(load,unveil);

html { 
  background: url(http://www.brwalkers.esy.es/images/bg3.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.sc{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #e3e3e3;
    -webkit-box-shadow: 2px 6px 16px 1px rgba(0,0,0,0.61);
    -moz-box-shadow: 2px 6px 16px 1px rgba(0,0,0,0.61);
    box-shadow: 2px 6px 16px 1px rgba(0,0,0,0.61);
}

.sc h1{
    position: absolute;
    text-align: center;
    font-size: 70px; 
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
    top: 30%;
    bottom: 0;
    left: 0;
    right: 0;
}

.sc p{
    position: absolute;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
    font-size: 25px;
    top: 45%;
    bottom: 0;
    left: 0;
    right: 0;
}

.arrow{
    position: relative;
}

#arrow1{
    cursor: pointer;
    position: absolute;
    margin: auto;
    margin-top: 45%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}