向上滑动整页

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()。你只能通过一个。在html
2. 电话.animate()和body代替
3. 在.animate()设置scrollTop的，如果你想转到页的顶部

Here is the updated JSFiddle