水平滚动到锚点

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();
    });

});

如果你想在几个元素之间水平滚动，这应该可以做到。

下面是另一个引用：Link

Answer 2

如果我理解得很好，你需要水平滚动，每个“屏幕”都有一个整页的宽度。如果是这样的话，你不需要javascript，但是你只能用css来实现，除非你需要在“屏幕”之间平滑地滚动。

在不使用js的情况下，您只需要使每个box的宽度达到100%，并将内容放在一个子元素中即可。

来领会这一想法

Answer 3

根据David Fariñ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();
        });
});