水平滾動到錨點

Question

我有一個網站，它的水平導航。

下面的代碼：

<ul> 
    <li><a href="#box-1"></a></li> 
    <li><a href="#box-2"></a></li> 
    <li><a href="#box-3"></a></li> 
    <li><a href="#box-4"></a></li> 
    <li><a href="#box-5"></a></li> 
    <li><a href="#box-6"></a></li> 
    <li><a href="#box-7"></a></li> 
    <li><a href="#box-8"></a></li> 
    <li><a href="#box-9"></a></li> 
    <li><a href="#box-10"></a></li> 
</ul> 
<div id="content"> 
    <div id="box-1"></div> 
    <div id="box-2"></div> 
    <div id="box-3"></div> 
    <div id="box-4"></div> 
    <div id="box-5"></div> 
    <div id="box-6"></div> 
    <div id="box-7"></div> 
    <div id="box-8"></div> 
    <div id="box-9"></div> 
    <div id="box-10"></div> 
</div> 

每盒有300像素的寬度。但是當我點擊時，如果它在解析區域中可見，它將不會滾動到框中。我試圖做的是，如果我點擊例如<a href="#box-3">它會把我帶到div #box-3，但它將是第一個在左邊，其他div必須隱藏。 隱藏的僅僅是別人div時分辨率非常小，它的作品完美，但如果分辨率是非常廣泛的，它不會工作..

Answer 1

喜歡的東西：

$(document).ready(function() { 

    $('ul>li>a').bind('click',function(event){ 
     var $anchor = $(this); 

     $('html, body').stop().animate({ 
      scrollLeft: $($anchor.attr('href')).offset().left 
     }, 1000); 
     event.preventDefault(); 
    }); 

}); 

如果youre設法水平之間滾動這應該做的很少的元素。

這裏是另外一個參考：Link

Answer 2

如果我理解正確的這個，你有你想要一個固定寬度的區域顯示一個時間？喜歡這個？

<ul> 
    <li><a href="#box-1">menu item 1</a></li> 
    <li><a href="#box-2">menu item 2</a></li> 
    <li><a href="#box-3">menu item 3</a></li> 
    <li><a href="#box-4">menu item 4</a></li> 
</ul> 

<div id="container"> 
    <div id="content"> 
     <div class="box-container" id="box-1"> 
      <div class="box-contents">stuff</div> 
     </div> 
     <div class="box-container" id="box-2"> 
      <div class="box-contents">stuff</div> 
     </div> 
     <div class="box-container" id="box-3"> 
      <div class="box-contents">stuff</div> 
     </div> 
     <div class="box-container" id="box-4"> 
      <div class="box-contents">stuff</div> 
     </div> 
    </div> 
</div> 

#container { width: 100%; overflow: hidden;} 
#content { width: 400%; } 
.box-container { width: 25%; background-color: red; float: left; display: block;} 
.box-contents { height: 300px; width: 300px; text-align: left; background-color: blue; } 

的jsfiddle例如這裏：http://jsfiddle.net/8B3hL/

很明顯，你將需要鏈接這些菜單項，但你的想法

Answer 3

如果我深知，你需要水平滾動，每個「屏」有一個完整的頁面寬度。如果是這種情況，你不需要JavaScript，但你只能用CSS來創建它，除非你需要在「屏幕」之間使用平滑滾動。

如果不使用js，您只需要使每個box的寬度爲100％，並且將內容放在孩子的內部。

Check this fiddle獲得的想法