動畫scrollleft與（'HTML，身體'）工作良好，但給與（'#div'）

Question

jsfiddle這是工作良好，但我實際上只想滾動一個div而不是全身。 這是我嘗試過的jsfiddle，但它給不想要的結果。 將offset（）更改爲position（），但結果相同。

HTML代碼：

<ul id="banner"> 
     <li> <a href="#1">1</a> 
     </li> 
     <li> <a href="#2">2</a> 
     </li> 
     <li> <a href="#3">3</a> 
     </li> 
     <li> <a href="#4">4</a> 
     </li> 
    </ul> 
    <div id="wrapper"> 
    <div id="container"> 
      <div id="1" class="panel">1</div> 
      <div id="2" class="panel">2</div> 
      <div id="3" class="panel">3</div> 
      <div id="4" class="panel">4</div> 
    </div> 
    </div> 
</body> 

CSS代碼：

body { 

    margin: 0 0 0 0; 
} 
.panel { 
    width: 25%; 
    height:100%; 
    float:left; 
    margin-top: 45px; 

} 
ul#banner { 
    position: fixed; 
    line-height: 45px; 
    margin: 0 30px; 
    padding: 0; 
    z-index: 9; 
} 
ul#banner li { 
    display: inline; 
    z-index: 10; 
} 

#container { 

    width: 400%; 

} 

#wrapper { width: 100%; overflow-x:hidden; } 

jQuery代碼：

$(document).ready(function() { 
    $("#banner a").bind("click", function (event) { 
     event.preventDefault(); 
     var target = $(this).attr("href"); 
     $(" #wrapper").stop().animate({ 
      scrollLeft: $(target).offset().left, 
      scrollTop: $(target).offset().top 
     }, 1000); 
    }); 
}); 

在此先感謝。 :)

Answer 1

將近有

您需要不是動畫的容器包裝器，並且包裝需要有position:relative在CSS

#wrapper { width: 100%; overflow-x:hidden; position:relative;} 

而且

$(document).ready(function() { 
    $("#banner a").bind("click", function (event) { 
     event.preventDefault(); 
     var target = $(this).attr("href"); 
     $("#container").stop().animate({ 
      left: $(target).offset().left, 
      top: $(target).offset().top 
     }, 1000); 
    }); 
}); 

見jsfiddle