jquery - 为什么向左滚动不适用于负值？

Question

我的设计有三个 block ，三个在顶部，一个在底部，低于中间。

左 <--------> 中<---------->右

----------------底部--------------------

我有两个问题。

1. 为什么向左滚动不适用于负值。 (左键点击section2) (我得到 $('#section1').offset().left == -4000)

2. 我如何使用 scrollTop: $($anchor.attr('href')).offset().top 用于顶部-底部部分。

JSFIDDLE

HTML代码

<div class="section white" id="section1" style='margin-left: -4000px;'>
            <h2>Section 1</h2>
            <ul class="nav">
                <li><a href="#section2">Right</a></li>
            </ul>
        </div>
        <div class="section black" id="section2">
            <h2>Section 2</h2>
            <ul class="nav">
                <li><a href="#section1">Left</a></li>
                <li><a href="#section4">Bottom</a></li>
                <li><a href="#section3">Right</a></li>
            </ul>
        </div>
        <div class="section white" id="section3">
            <h2>Section 3</h2>
            <ul class="nav">
                <li><a href="#section2">Left</a></li>
            </ul>
        </div>
        <div class="section_vertical white" id="section4">
            <div style="width:33%; margin: 0 auto">
                <h2>Section 4</h2>
                <ul class="nav">
                    <li><a href="#section2">up</a></li>
                </ul>
            </div>
        </div>

j查询

        $('ul.nav a').bind('click',function(event){
            var $anchor = $(this);
             $('html, body').stop().animate({
                  scrollLeft: $($anchor.attr('href')).offset().left
              }, 3000);
             event.preventDefault();
        });

Answer 1

答案 1

body左侧位置，html不能为负数

改为:

1. in id="section1" remove style='margin-left: -4000px;'
2. add $('html, body').scrollLeft(4000) that section 2 comes into view

http://jsfiddle.net/buwn5yra/3/

答案 2

JQ:

$('ul.nav a').bind('click',function(event){
    var id = $(this).attr('href');
    var t=$(id).offset().top;  // get top position
    var l=$(id).offset().left; // left left position

    $('html, body').stop().animate({
        scrollLeft: l,
        scrollTop: t                        
    }, 3000);
    event.preventDefault();
});

HTML: 在第 4 节中删除 style="width:33%; margin: 0 auto"。此样式将内容放在中间，因此当您滚动到此部分时它不会显示。 Section4 为 100% 宽度。

http://jsfiddle.net/buwn5yra/5/

回答 2 更新:

http://jsfiddle.net/buwn5yra/7/

$('ul.nav a').bind('click', function (event) {
    var id = $(this).attr('href');
    var t = $(id).offset().top;
    var l = $(id).offset().left;

    if(id=="#section4") l=$(this).parents('.section_vertical').left;

    $('html, body').stop().animate({
        scrollLeft: l,
        scrollTop: t
    }, 3000);
    event.preventDefault();
});


$('html, body').scrollLeft(4000)