水平滾動以錨定

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>

每個框的寬度為300px。 但是，當我單擊時，如果它在分辨率區域中可見，則不會滾動到該框。 我想做的是，如果我點擊例如<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();
    });

});

如果您嘗試在幾個元素之間水平滾動，則應這樣做。

這是另一個參考： 鏈接

Answer 2

如果我理解得很好，則需要水平滾動，每個“屏幕”都具有整頁寬度。 如果是這種情況，則不需要javascript，而只能使用css來實現，除非需要在“屏幕”之間進行平滑滾動。

在不使用js的情況下，您只需要使每個box的寬度為100％，然后將其內容包含在子級中即可。

檢查這個小提琴以獲得想法

Answer 3

根據大衛·法里尼亞（DavidFariña）的回答，此句柄也出現在頁面上

function horizontal_anchor(){
 var hash=decodeURIComponent(location.hash);/*decode special chars like spaces*/
 jQuery('html, body').stop().animate({
 scrollLeft: jQuery(hash).offset().left
 }, 1000);
}

jQuery(document).ready(function(){  
        //on load
        if(location.hash) horizontal_anchor();
        //on url change
        jQuery(window).on('hashchange',function(event){
            horizontal_anchor()
            event.preventDefault();
        });
});

Answer 4

如果我理解正確，那么您有一個固定寬度的區域要一次顯示一個嗎？ 像這樣？

<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/

顯然，您需要鏈接這些菜單項，但是您知道了