jQuery ScrollTo does not work in Chrome

seo123

New Member
I'm creating a website with horizontal scrolling. I'm using this jQuery plugin for automatic scrolling. Below is the code.HTML<head><link type="text/css" rel="stylesheet" href="http://stackoverflow.com/questions/14546002/stylesheets/styles.css" /><script type="text/javascript" src="http://stackoverflow.com/questions/14546002/js/jquery-1.8.2.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/14546002/js/jquery.scrollTo-min.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/14546002/js/script.js"></script></head><body><div id="container"><div id="navigation"> <ul> <li> <div class="menubutton" id="homeLink"><a class="menuitem" href="http://stackoverflow.com/questions/14546002/#"></a></div> </li> <li> <div class="menubutton" id="aboutLink"><a class="menuitem" href="http://stackoverflow.com/questions/14546002/#"></a></div> </li> <li> <div class="menubutton" id="musicLink"><a class="menuitem" href="http://stackoverflow.com/questions/14546002/#"></a></div> </li> </ul></div><!-- end of navigation --><div id="firstMark"></div><div id="secondMark"></div><div id="thirdMark"></div></div></body></html>CSS@charset "utf-8";ul li { list-style-type:none; }/* navigation */#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }.menubutton:hover { cursor:pointer; }#homeLink { background-color:#007FD2; }#aboutLink { background-color:#C7007A; }#musicLink { background-color:#FFDB1A; }#brandsLink { background-color:#000; }#contactLink { background-color:#F90; }#homeLink:hover { background-color:#006DB4; }#aboutLink:hover { background-color:#99005E; }#musicLink:hover { background-color:#FFC61A; }#brandsLink:hover { background-color:#333; }#contactLink:hover { background-color:#F60; }#container { position:absolute; width:10000px; height:100%; background-color:#FFC; top:0; left:0;}#firstMark { position:absolute; width:1px; height:1px; left:3000px; }#secondMark { position:absolute; width:1px; height:1px; left:6000px; }#thirdMark { position:absolute; width:1px; height:1px; left:9000px; }JavaScript$(document).ready(function(e) { $('#homeLink').click(function(e) { e.preventDefault(); $.scrollTo(0,0, {duration: 2000}); }); $('#aboutLink').click(function(e) { e.preventDefault(); $.scrollTo('#firstMark', {duration: 2000}); }); $('#musicLink').click(function(e) { e.preventDefault(); $.scrollTo('#secondMark', {duration: 2000}); });});Here's the link to a demo page. This works in Firefox(v18), Opera(v12), Safari(v5.1.2) and even Internet Explorer 9 but it doesn't work in Chrome(v24). Can anybody tell me what's missing here? It it something wrong with my code or a bug in the plugin?Failing that, please tell me if there are any other alternatives to automatic scrolling which also supports horizontal scrolling.Thank you.
 
Back
Top