jquery scrollTo(){axis:'x'}不起作用

时间:2012-12-18 15:53:23

标签: jquery html css

我不知道我做错了什么,但是如果我把选项{axis:'x'}放在这个插件上,滚动就不起作用了

我的HTML代码:

<div id="wrap">

    <div id="main" class="container">

        <div id="wrapper">
            <div id="mask">

                <div id="item0" class="item">
                    <a name="item0"></a>
                    <div class="conteudo">
                        aaaa
                    </div>
                </div>

                <div id="item1" class="item">
                    <a name="item1"></a>
                    <div class="conteudo">
                        bbbbs
                    </div>
                </div>          

            </div>
        </div>

    </div>

</div>



<div class="wrap_menu">
            <ul class="menu">
                <li><a href="#item1" class="panel">EMPRESA</a></li>
                <div class="traco"></div>
                <li><a href="#item2" class="panel">SERVIÇOS</a></li>
                <div class="traco"></div>
                <li><a href="#item3" class="panel">EVENTOS</a></li>
                <div class="traco"></div>
                <li><a href="#item4" class="panel">VJ</a></li>
                <div class="traco"></div>
                <li><a href="#item5" class="panel">PARCEIROS</a></li>
                <div class="traco"></div>
                <li><a href="#item6" class="panel">CONTATO</a></li>
            </ul>
        </div>

我的css代码:

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

body{
    font-family:'Pontano Sans', sans-serif;
    color:#FFF;
    background:#110030 url(../imagens/fundo_site.jpg) no-repeat center center fixed;
}

#main {overflow:auto;
    padding-bottom: 117px;}  /* deve ter a mesma altura do rodapé */
#wrapper {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#ccc;
    overflow:hidden;
}

#mask {
    width:100%;
    height:100%;
    /*background:#FFCC00;*/
}

.item {
    width:100%;
    height:100%;
    float:left;
}

#item0{
    background: #000 url(../imagens/bkg/fundo_site.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#item1{
    background: #000 url(../imagens/bkg/fundo_site2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.conteudo {
    position:relative;
    width:960px;
    height:420px;
    margin: 0 auto 150px;
    left:50%;
    margin-left:-480px;
    background:url(../imagens/fundo_conteudo.png);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.clear {
    clear:both;
}

.item:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.conteudo {
  display: inline-block;
  vertical-align: middle;
}

我的脚本代码:

$(document).ready(function() {

        $('a.panel').click(function (e) {
            e.preventDefault();
            //reset and highlight the clicked link
            $('a.panel').removeClass('ativo');
            $(this).addClass('ativo');

            //grab the current item, to be used in resize function
            current = $(this);

            //scroll it to the destination
            //$('.item').hide();
            //$((this).attr('href')).add('.current').show();
            //$('.item').show();
            $('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'});


        });

    });

我也尝试使用这种方式:

$('#wrapper').animate({scrollLeft:$(this).attr('href')},2000);

但也不行!

我做错了什么?

1 个答案:

答案 0 :(得分:2)

有关基本功能,请尝试替换

$('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'});

$('#wrapper').scrollLeft($($(this).attr('href')).offset().left);

此代码应正确设置滚动。要使面板滑动到此位置,请尝试以下代码:

$('#wrapper').animate({scrollLeft: $($(this).attr('href')).offset().left}, 2000);

编辑:

对于您的网站,元素在彼此之上和之下。目前,您可以使用此代码进行转换:

$('#wrapper').animate({scrollTop: $($(this).attr('href')).offset().top}, 2000);

您可以进行CSS和网站结构更改,以通过左滚动进行转换,并使仅黑色居中框内的内容进行转换。如果这种功能符合预期,请告诉我,我将为您提供一些示例标记。