2012-12-24 5 views
0

J'essaye de faire un ancrage horizontal de défilement à l'intérieur d'un DIV. Semble fonctionner si j'anime juste l'étiquette entière de corps mais ne semble pas fonctionner dans une DIV pour moi.animation de défilement horizontal dans DIV se comporte bizarre

Heres le javascript

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  

    <script type="text/javascript"> 
      jQuery(document).ready(function($) { 

       $(".scroll").click(function(event){  
        event.preventDefault(); 
        $('#wrapper').animate({scrollLeft:$(this.hash).offset().left}, 500); 
       }); 
      }); 
    </script> 

et Heres le Html

<body> 
    <div id="wrapper"> 
    <div id="wrappercontent"> 
    <div id="section1" class="section"> 

     <img src="images/big_head.png" /> 

    </div> 
    <div id="section2" class="section"> 
     <img src="images/whatis.png" /> 

    </div> 
    <div id="section3" class="section"> 
     <h2>Section 3</h2> 
     <p> 
      blahblahblabh 

     </p> 

    </div> 
    </div> 
<div id="nav"> 
      <li><a href="#section1" class="scroll">1</a></li> 
      <li><a href="#section2" class="scroll">2</a></li> 
      <li><a href="#section3" class="scroll">3</a></li> 
     </div> 

     </div> 
</body> 

et Heres la feuille de style

*{ 
    margin:0; 
    padding:0; 
} 
body{ 
    background:#f0efe4; 
    letter-spacing:-1px; 
    font-family:Georgia; 
    font-size: 34px; 
    font-style: italic; 
    width:12000px; 
} 
#wrapper{ 
    width:1000px; 
    height:700px; 

    overflow:scroll; 
} 
#wrappercontent{ 
    height:auto; 
    width:12000px; 

} 

#nav{ 
    z-index:1; 
    position:fixed; 
} 
.section{ 
    margin:0px; 
    bottom:0px; 
    width:4000px; 
    float:left; 
    height:100%; 
    text-shadow:1px 1px 2px #f0f0f0; 
} 

Son comportement étrangement. S'il vous plaît aider

Répondre