2014-01-04 3 views
-1

Я знаю, что эта проблема была решена до этого, и я использовал ваши указатели для предыдущих веб-страниц, но тем не менее я не могу прокручивать верхнюю часть страницы при нажатии на отдельный элемент. Любая помощь будет оценена!jQuery click ScrollTop не работает

http://jsfiddle.net/wkQv6/3/

HTML

<div id='menutab' class='navbar'> 
    Menu 
     </div> 
    <div class='navbar' id='storytab'> 
    Our Story 
    </div> 
    <div class='navbar' id='contacttab'> 
     Contact 
     </div> 
     <button id='orderbutton'>Order Now!</button> 

    </div> 
    <div id='menupage'> 
    </div> 
</body> 

CSS

div{width:100%;} 
    #navbar{ 
     background-color:green; 
     color:red; 
     width:100%; 
     text-align:center; 
     height:80px; 
     top:0px; 
     right:0px; 
     vertical-align:bottom; 
     line-height:80px; 
     position:fixed; 
     margin-top:0px; 
     z-index:1; 
     padding:0px; 
     font-family: 'Georgia', 'serif'; 
     } 
     li{ 
     text-decoration:none; 
     display:inline; 
     list-style-type:none; 
     padding:30px; 
     width: 50px;} 
     #pizza{ 
     background-image:url('http://www.valentinospizzaandsportsbar.com/wp-content/uploads/2013/10/pizza-15.jpg'); 
     right:0px; 
     height:1000px; 
     z-index:-1; 
     width:100%; 
     background-repeat:no-repeat; 
     margin-top:80px; 
     } 
     #menu{ 
      background-color:black; 
      opacity:.8; 
      height: 700px; 
      z-index:0; 
      margin-top:100px; 
      margin-bottom:150px; 
      position:absolute; 
      font-family: 'Times New Roman', Georgia, cursive; 
      color:white; 
      text-align:center; 
      } 
table{font-size:24px;} 

#left{margin-left:70px; 
margin-bottom:30px; 
padding-left:70px; 
text-align:left; 
position:static;} 
#right{margin-right:70px; 
    margin-bottom:30px; 
    padding-left:200px; 
text-align:left; 
position:static;} 

     #pizza{ 
    right:0px;} 
     #story{ 
      background-image:   url('http://thumbs.dreamstime.com/z/family-eating-pizza-fries-home-11541657.jpg'); 
    background-repeat:no-repeat; 
    height:1000px; 
    width:100%;} 
    #pizzabox{ 
     position: fixed; 
     bottom: 10px; 
     right: 10px; 
     z-index: 1000; 
     margin: 5px auto; 
     width: auto; 
     background-color:white; 
     opacity:.5;} 

JQuery

$(document).ready(function(){ 


     $('#orderbutton').click(function(){ 
     $('html,body').animate({scrollTop:$('#menupage').offset().top}, 1000); 

}); 
}); 
+0

Включает jquery in jsfiddle –

ответ

0

это работа в порядке, вы не включили jquery в свою скрипку. и вы можете удалить $(document).ready в свою скрипку.

JSFIDDLE

Смежные вопросы