javascript - 水平滚动到 anchor

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