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

但它只是下降......它没有移动到约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;
    });
});

<强> DEMO

Jquery转移到其他div（animate）

1 个答案: