Question

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

左＆lt; --------＆gt;中间＆LT; ----------＆GT;右

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

我有两个问题。

为什么向左滚动不适用于负值。（左键单击第2节）（我得到$('#section1').offset().left == -4000）
如何将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>

jquery

        $('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

身体的左侧位置，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：在section4中删除style =＆＃34; width：33％;保证金：0自动＆＃34;。此样式将内容放在中间，因此滚动到此部分时不会显示。 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)

为什么向左滚动不能用于负值？

JSFIDDLE

1 个答案: