Question

我知道这个问题在此之前已经解决了，我已经使用了以前网页的指针，但是我仍然无法在点击一个不同的元素时滚动到页面的顶部。任何帮助将不胜感激！

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

});
});

Answer 1

它工作正常，你没有在你的小提琴中加入jquery。你也可以删除小提琴中的$(document).ready。

JSFIDDLE

jQuery单击ScrollTop不起作用

1 个答案: