scrollTo Jquery WILL NOT WORK, what am I missing?
Question
I've used this plug in numerous times and I'm either being very dumb or having a brain fart because I just can't get it to work. I have 3 div's that I want to scroll within another div(a container div).
here's a link of the "non functioning setup" and heres the code...
$(document).ready(function() {
$("#sc").click(function() {
$('#main_hold').scrollTo('#m1');
});
$("#ac").click(function() {
$('#main_hold').scrollTo('#m2');
});
$("#cc").click(function() {
$('#main_hold').scrollTo('#m3');
});
});
and the HTML *note the blank spaces are there for spacing without text...
<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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id = "m2" class = "mhold">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id = "m3" class = "mhold">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div style="clear:both"></div>
</div>
<footer>
</footer>
</div>
</body>
1 answers
solution1
0 2011-08-17 14:45:25
Do you have a CSS style applied to your main_hold div with the rule overflow: scroll; ? If not, you may want to scroll the window instead:
$.scrollTo('#m1');
Take a look at this jsfiddle: http://jsfiddle.net/Czkan/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.