jQuery移至其他div（動畫）

Question

我有2個div：

的CSS

  #home {
    width: 1280px;
    height: 1000px;
    background: #000;
  }

  .step1 {
    position: absolute;
    margin-top: 100px;
    margin-left: 500px;
  }

  .step1 a{
    background: #AAF75A;
    width: 100%;
    line-height: 55px;
    padding: 14px 49px;
    text-decoration: none;
    font-family: tahoma;
    font-size: 20px;
  }


  #about {
    position: absolute;
    margin-left: 3000px;
    width: 1280px;
    height: 1000px;
    background: #000;
  }

的HTML

<div id="home">
<article>
  <div class="step1"><a class="move" href="#about">Let's go</a></div>
</article>
</div>


<div id="about">
<article>
  <div class="step1"><a class="move" href="#home">Next !?</a></div>
</article>
</div>

我想從div id="home"轉到div id="about"

我有這個

JS

$(function($){
   $('a.move').click(function() {
        var $this = $(this),
          _href = $this.attr('href'),
          dest  = $(_href).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({  scrollTop: dest}, 400 );
        return false;
    }); 
});

但是它只是下降了...它不會移動到about div

Answer 1

您還必須向左滾動。 像這樣：

$(function ($) {
    $('a.move').click(function () {
        var $this = $(this),
            _href = $this.attr('href'),
            destX = $(_href).offset().top;
            destY = $(_href).offset().left;
        $('body').animate({
            scrollTop: destX,
            scrollLeft: destY            
        }, 400);
        return false;
    });
});

演示