2011-08-17 70 views
0

我已经在很多次使用过这个插件,我要么非常笨,要么因为我无法让它工作。我有3个div,我想在另一个div(一个容器div)内滚动。scrollTo Jquery不工作,我错过了什么?

这里的“非功能设置”,继承人的代码的链接...

$(document).ready(function() { 
    $("#sc").click(function() { 
    $('#main_hold').scrollTo('#m1'); 
    }); 
    $("#ac").click(function() { 
     $('#main_hold').scrollTo('#m2'); 
    }); 
    $("#cc").click(function() { 
     $('#main_hold').scrollTo('#m3'); 
    }); 
}); 

和HTML *注意空格是那里没有文字间距......

<body> 
    <div id="container"> 
    <header> 
<div id = "navigation"> 
<ul> 
<li><a href="javascript:;" id = "sc">Services</a></li> 
<li><a href="javascript:;" id = "ac">About</a></li> 
<li><a href="javascript:;" id = "cc">Contact</a></li> 
</ul> 
</div> 
    </header> 
<div id = "main_hold" role="main"> 
<div id = "m1" class = "mhold"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
</div> 
<div id = "m2" class = "mhold"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
</div> 
<div id = "m3" class = "mhold"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
</div> 
<div style="clear:both"></div> 
</div> 

    <footer> 

    </footer> 
    </div> 
</body> 
+0

如果有空格前后的id属性的“=”,你可能想删除它们。 –

+0

不,它不是 –

回答

0

您是否有适用于main_hold div的CSS样式,规则overflow: scroll;?如果没有,你可能要滚动的窗口,而不是:

$.scrollTo('#m1'); 

看看这个的jsfiddle:http://jsfiddle.net/Czkan/

+0

这似乎并不是这样,我以前做过,似乎从来没有问题... –

+0

@Greg汤普森 - 这很奇怪。我在scrollTo工作的地方添加了一个jsfiddle。看看,也许它会有所帮助。我应该问,你是否得到任何JavaScript错误? – RoccoC5

+0

是的,我复制了OP的代码并进行了修复。适用于我。 – Malvolio