我知道这个问题在此之前已经解决了,我已经使用了以前网页的指针,但是我仍然无法在点击一个不同的元素时滚动到页面的顶部。任何帮助将不胜感激!
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);
});
});