Сдвиньте вверх всю страницу

Question

Я создал сайт с заставкой в ​​начале, который затем я хочу сдвинуть вверх над экраном и исчезнуть при нажатии стрелки. Я пытаюсь сделать это, используя анимацию в JQuery. Я создал Fiddle, чтобы проверить код.

HTML

 <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> 

JS

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); 

CSS

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; 
} 

Answer 1

Я нашел несколько ошибок в коде.

1. Вы передаете несколько обработчиков в .ready(). Вы можете пройти только в одном.
2. Вызов .animate() на html и body вместо
3. В .animate() установлен scrollTop, если вы желаете, чтобы перейти к началу страницы

Here is the updated JSFiddle